Comment puis-je placer des éléments dans des tableaux d'états avec le hook useState de React ?

Pousser des éléments dans des tableaux d'état avec des hooks React (useState)

Le hook React useState fournit un mécanisme pour gérer l'état au sein des composants fonctionnels. Contrairement aux composants de classe, où vous utilisez this.setState() pour mettre à jour l'état, useState introduit une fonction de mise à jour d'état pour modifier l'état d'un composant.

Comment pousser un élément dans un état de tableau

Pour pousser un élément dans un état de tableau à l'aide de useState, vous pouvez suivre ces étapes :

1. Initialisez votre état avec un tableau à l'aide du hook useState :

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

2. Créez une fonction de mise à jour d'état appelée setTheArray qui vous permet de modifier l'état du tableau.

3. Pour pousser un élément dans le tableau, appelez setTheArray et transmettez une fonction qui renvoie le tableau mis à jour. La fonction doit prendre l'état précédent (oldArray) comme argument :

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

Formulaire de rappel vs. Formulaire de non-rappel

Dans Dans la majorité des cas, il est recommandé d'utiliser le formulaire de rappel lors de la mise à jour des tableaux au sein de l'état. En effet, les mises à jour d'état sont asynchrones, ce qui signifie que leur exécution n'est pas immédiate. En utilisant le formulaire de rappel, vous pouvez vous assurer que la dernière version de l'état est toujours utilisée pour la mise à jour du tableau.

Cependant, il existe certains cas où vous pouvez utiliser le formulaire sans rappel sans aucun problème. Ceci n'est applicable que lorsque vous mettez à jour l'état du tableau uniquement dans les gestionnaires pour des événements utilisateur spécifiques, tels que les événements de clic.

Exemple de transmission d'un élément

Considérez le React suivant exemple de composant qui montre le passage d'un élément dans un état de tableau :

<code class="js">const {useState} = 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>

Dans cet exemple, lorsque l'utilisateur clique sur le bouton "Ajouter", le gestionnaire addEntryClick appelle setTheArray avec une fonction de rappel qui renvoie un nouveau tableau avec le nouvel élément ajouté à la fin.

En utilisant la méthode push dans le hook useState de React, vous pouvez gérer efficacement les tableaux d'état, qu'il s'agisse d'ajouter, de supprimer ou de modifier leur contenu, pour obtenir une base de code plus efficace et plus maintenable.

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!