Comment ajouter des éléments à un tableau à l'aide du hook useState dans React ?

Poussez des éléments dans des tableaux avec useState dans React

Lorsque vous utilisez le hook useState dans React, vous pouvez modifier votre tableau d'état en appelant sa mise à jour méthode. Cette méthode est fournie lorsque vous initialisez l'élément d'état, tel que :

<code class="js">const [theArray, setTheArray] = useState(initialArray);</code>

Pour ajouter un nouvel élément au tableau, transmettez le tableau mis à jour ou une fonction qui génère le nouveau tableau à la méthode setTheArray. Cette dernière est généralement utilisée car les mises à jour d'état dans React sont asynchrones et peuvent se produire par lots.

<code class="js">setTheArray(oldArray => [...oldArray, newElement]);</code>

Alternativement, cette syntaxe de raccourci peut suffire si vous effectuez uniquement des mises à jour dans les gestionnaires pour des événements utilisateur spécifiques (comme les clics , mais pas le mouvement de la souris) :

<code class="js">setTheArray([...theArray, newElement]);</code>

Les événements qui déclenchent des vidages de rendu dans React sont appelés « événements discrets ».

Exemple en direct :

<code class="js">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")
);</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!