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

Elemente mit useState in React in Arrays verschieben

Wenn Sie den useState-Hook in React verwenden, können Sie Ihr Status-Array ändern, indem Sie dessen Aktualisierung aufrufen Verfahren. Diese Methode wird bereitgestellt, wenn Sie das Statuselement initialisieren, z. B.:

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

Um dem Array ein neues Element hinzuzufügen, übergeben Sie das aktualisierte Array oder eine Funktion, die das neue Array generiert, an die setTheArray-Methode. Letzteres wird normalerweise verwendet, weil Statusaktualisierungen in React asynchron sind und stapelweise erfolgen können.

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

Alternativ kann diese Verknüpfungssyntax ausreichen, wenn Sie Aktualisierungen innerhalb von Handlern nur für bestimmte Benutzerereignisse (z. B. Klicks) vornehmen , aber keine Mausbewegung):

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

Ereignisse, die Rendering-Flushes in React auslösen, werden als „diskrete Ereignisse“ bezeichnet.

Live-Beispiel:

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

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