Maison >interface Web >js tutoriel >Comment ajouter des éléments à un tableau à l'aide du hook useState dans React ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-10-29 07:37:02246parcourir

How do I add elements to an array using the useState hook in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn