Push-Methode in React Hooks (useState)?

Wie schiebe ich ein Element in das useState-Array? React hook? Ist das eine alte Methode im Reaktionszustand? Oder etwas Neues?

ZB setState Push Beispiel ?

Wenn Sie verwenden useState, können Sie eine Aktualisierungsmethode für das Statuselement erhalten:

const [theArray, setTheArray] = useState(initialArray);

Wenn Sie dann ein neues Element hinzufügen möchten, verwenden Sie diese Funktion und übergeben das neue Array oder eine Funktion, die das neue Array erstellt. Normalerweise letzteres, da Statusaktualisierungen asynchron und manchmal stapelweise sind:

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

Manchmal kann man , ohne dass die Callback - Formular weg, wenn Sie nur das Array in Handler für bestimmte Benutzerereignisse aktualisieren wie click(aber nicht wie mousemove):

setTheArray([...theArray, newElement]);

Die Ereignisse , für die gewährleistet , dass Reagieren Rendering gespült wird die „diskrete Ereignisse“ aufgeführt hier .

Live-Beispiel (Rückruf an setTheArray):

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")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

Da das einzige Update darin theArraydas in einem clickEreignis ist (eines der "diskreten" Ereignisse), könnte ich mit einem direkten Update davonkommen addEntry:

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray([...theArray, `Entry ${theArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

Um ein wenig weiter zu expandieren, hier einige allgemeine Beispiele. Beginnen mit:

const [theArray, setTheArray] = useState(initialArray);
const [theObject, setTheObject] = useState(initialObject);

Schieben Sie das Element am Ende des Arrays

setTheArray(prevArray => [...prevArray, newValue])

Element am Ende des Objekts pushen / aktualisieren

setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));

Push / Update-Element am Ende des Array von Objekten

setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);

Schieben Sie das Element am Ende des Objekts der Arrays

let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);

Hier sind auch einige Arbeitsbeispiele. https://codesandbox.io/s/reacthooks-push-r991u

Genauso wie Sie es mit dem "normalen" Status in React-Klassenkomponenten tun.

Beispiel:

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>
  );
}

// Save search term state to React Hooks with spread operator and wrapper function

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query))

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query))

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query])

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query])

https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

setTheArray([...theArray, newElement]);ist die einfachste Antwort, aber achten Sie auf die Mutation von Elementen im Array . Verwenden Sie das Deep Cloning von Array-Elementen.

Die am meisten empfohlene Methode ist die gemeinsame Verwendung der Wrapper-Funktion und des Spread-Operators. Wenn Sie beispielsweise einen Status namewie diesen initialisiert haben ,

const [names, setNames] = useState([])

Sie können auf dieses Array wie folgt pushen:

setNames(names => [...names, newName])

Hoffentlich hilft das.

Ich habe die oben genannten Methoden zum Verschieben eines Objekts in ein Array von Objekten in useState ausprobiert, hatte jedoch den folgenden Fehler bei der Verwendung von TypeScript :

Geben Sie 'TxBacklog [] | ein undefined 'muss eine' Symbol.iterator'-Methode haben, die eine iterator.ts (2488) zurückgibt.

Das Setup für tsconfig.json war anscheinend richtig:

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

Diese Problemumgehung hat das Problem gelöst (mein Beispielcode):

Schnittstelle:

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

Zustandsvariable:

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

Neues Objekt in Array schieben:

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

Wenn Sie nach einem bestimmten Index pushen möchten, können Sie wie folgt vorgehen:

   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;
        });
    };