Wie füge ich mithilfe von useState Elemente zu einem Array in React Hooks hinzu?

Elemente in Arrays in React Hooks verschieben (useState)

Beim Umgang mit Zustandsarrays in React Hooks ist die herkömmliche Methode nicht mehr anwendbar . Stattdessen stellt useState eine Aktualisierungsmethode für jedes Statuselement bereit:

const [arrayState, setArrayState] = useState(initialState);

Um ein neues Element zu arrayState hinzuzufügen, können Sie setArrayState entweder mit einem neuen Array oder einer Funktion aufrufen, die ein neues Array erstellt, normalerweise letzteres aufgrund der asynchronen Natur von Statusaktualisierungen:

setArrayState(prevArray => [...prevArray, newElement]);

Bei bestimmten diskreten Ereignissen, wie z. B. Klickereignissen, können Sie den Rückruf möglicherweise weglassen:

setArrayState([...arrayState, newElement]);

Hier ist ein Live-Beispiel Demonstration der Verwendung des Rückrufs:

<code class="javascript">import React, { useState, useCallback } from "react";

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

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

Denken Sie daran, dass die Schlüsselstütze für das Rendern von Listen in React für einen effizienten Abgleich und eine optimale Leistung unerlässlich ist.

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von useState Elemente zu einem Array in React Hooks hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!