Comment pousser des éléments sur un tableau dans le hook useState de React ?

Utilisation des hooks Push in React (useState)

Lorsque vous utilisez le hook useState de React, vous pouvez modifier un élément d'état du tableau à l'aide de la fonction set. fournit. Cela contraste avec l'ancienne approche consistant à utiliser setState, qui modifiait l'intégralité de l'objet d'état à la fois.

Pour pousser un élément sur le tableau, vous pouvez transmettre un nouveau tableau ou un rappel qui construit le nouveau tableau au set function.

Formulaire de rappel (recommandé)

Cette méthode est préférée car elle garantit que React gérera toutes les mises à jour asynchrones ou les lots qui peuvent survenir :

<code class="javascript">const [theArray, setTheArray] = useState(initialArray);
setTheArray(oldArray => [...oldArray, newElement]);</code>

Formulaire de non-rappel (événements discrets uniquement)

Dans les cas spécifiques où vous mettez à jour le tableau exclusivement en réponse à des « événements discrets », vous pouvez vous désinscrire du formulaire de rappel :

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

Événements discrets

Les événements discrets pour lesquels React garantit le rendu affleurant sont :

• onClick
• onDoubleClick
• onDragStart
• onDragEnd
• onTouchStart
• onTouchEnd
• onContextMenu
• onFocus
• onBlur

Exemple

L'exemple suivant illustre la méthode push dans useState :

<code class="javascript">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>

En utilisant la méthode push méthode dans useState, vous pouvez facilement mettre à jour les tableaux dans vos composants React, garantissant ainsi un flux de données fluide et efficace.

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!