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

Créer un état de tableau avec useState() Tout d'abord, voyons comment utiliser le hook useState() pour créer une variable d'état de type tableau.

import React from "react";

const { useState } = React;

const [myArray, setMyArray] = useState([]);

Cependant, avec React, nous devons utiliser la méthode renvoyée par useState pour mettre à jour le tableau.

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

en savoir plus

Answer 2

De la même manière que vous le faites avec l'état "normal" dans les composants de classe React.

exemple :

function App() {
  const [state, setState] = useState([]);

  return (
    <div>
      <p>You clicked {state.join(" and ")}</p>
      //destructuring
      <button onClick={() => setState([...state, "again"])}>Click me</button>
      //old way
      <button onClick={() => setState(state.concat("again"))}>Click me</button>
    </div>
  );
}

Answer 3

setTheArray([...theArray, newElement]); est la réponse la plus simple mais faites attention à la mutation des éléments dans theArray . Utilisez le clonage profond des éléments du tableau.

Answer 4

J'ai essayé les méthodes ci-dessus pour pousser un objet dans un tableau d'objets dans useState mais j'ai eu l'erreur suivante en utilisant TypeScript :

Le type 'TxBacklog[] | undefined' doit avoir une méthode 'Symbol.iterator' qui renvoie un itérateur.ts(2488)

La configuration du tsconfig.json était apparemment correcte :

{
   "compilerOptions": {
   "target": "es6",
   "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es6",
],

Cette solution de contournement a résolu le problème (mon exemple de code) :

Interface :

   interface TxBacklog {
      status: string,
      txHash: string,
   }

Variable d'état :

    const [txBacklog, setTxBacklog] = React.useState<TxBacklog[]>();

Pousse le nouvel objet dans le tableau :

    // Define new object to be added
    const newTx = {
       txHash: '0x368eb7269eb88ba86..',
       status: 'pending'
    };
    // Push new object into array
    (txBacklog) 
       ? setTxBacklog(prevState => [ ...prevState!, newTx ])
       : setTxBacklog([newTx]);

Answer 5

Si vous voulez pousser après un index spécifique, vous pouvez faire comme ci-dessous :

   const handleAddAfterIndex = index => {
       setTheArray(oldItems => {
            const copyItems = [...oldItems];
            const finalItems = [];
            for (let i = 0; i < copyItems.length; i += 1) {
                if (i === index) {
                    finalItems.push(copyItems[i]);
                    finalItems.push(newItem);
                } else {
                    finalItems.push(copyItems[i]);
                }
            }
            return finalItems;
        });
    };