Méthode Push dans React Hooks (useState) ?

Question

Comment pousser un élément dans le React hook du tableau useState ? Est-ce une ancienne méthode dans react state ? Ou quelque chose de nouveau ?

Par exemple exemple de setState push ?

Answer 1

Lorsque vous utilisez useState vous pouvez obtenir une méthode de mise à jour pour l'élément d'état :

const [theArray, setTheArray] = useState(initialArray);

ensuite, lorsque vous voulez ajouter un nouvel élément, vous utilisez cette fonction et passez le nouveau tableau ou une fonction qui créera le nouveau tableau. Normalement, c'est cette dernière qui est utilisée, puisque les mises à jour d'état sont asynchrones et parfois groupées :

setTheArray(oldArray => [...oldArray, newElement]);

Parfois, vous pouvez vous en sortir sans utiliser ce formulaire de rappel, si vous uniquement mettre à jour le tableau dans les gestionnaires pour certains événements spécifiques de l'utilisateur comme click (mais pas comme mousemove ) :

setTheArray([...theArray, newElement]);

Les événements pour lesquels React s'assure que le rendu est purgé sont les "événements discrets" énumérés. aquí .

Exemple en direct (passage d'un callback dans setTheArray ) :

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

Parce que la seule mise à jour de theArray là-dedans, il y a celui dans un click (l'un des événements "discrets"), je pourrais m'en sortir avec une mise à jour directe dans le fichier addEntry :

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray([...theArray, `Entry ${theArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

Answer 2

Pour aller un peu plus loin, voici quelques exemples courants. En commençant par :

const [theArray, setTheArray] = useState(initialArray);
const [theObject, setTheObject] = useState(initialObject);

Pousser l'élément à la fin du tableau

setTheArray(prevArray => [...prevArray, newValue])

Push/update élément à la fin de l'objet

setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));

Pousser/mettre à jour l'élément à la fin du tableau d'objets

setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);

Pousser l'élément à la fin de l'objet des tableaux

let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);

Voici également quelques exemples concrets. https://codesandbox.io/s/reacthooks-push-r991u

Answer 3

Vous pouvez ajouter un tableau de données à la fin de l'état personnalisé :

  const [vehicleData, setVehicleData] = React.useState<any[]>([]);
  setVehicleData(old => [...old, ...newArrayData]);

Par exemple, dans le tableau ci-dessous, vous voyez un exemple d'axios :

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        {
          url: `http://localhost:4000/api/vehicle?page=${page + 1}&pageSize=10`,
          method: 'get',
        }
      );
      setVehicleData(old => [...old, ...result.data.data]);
    };

    fetchData();
  }, [page]);

Answer 4

La méthode la plus recommandée est l'utilisation conjointe de la fonction wrapper et de l'opérateur d'étalement. Par exemple, si vous avez initialisé un état appelé name comme ça,

const [names, setNames] = useState([])

Vous pouvez pousser vers ce tableau comme ceci,

setNames(names => [...names, newName])

J'espère que cela vous aidera.

Answer 5

// Save search term state to React Hooks with spread operator and wrapper function

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query))

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query))

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query])

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query])

https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc