Heim  >  Artikel  >  Web-Frontend  >  Wie schiebe ich Elemente im useState-Hook von React auf ein Array?

Wie schiebe ich Elemente im useState-Hook von React auf ein Array?

Susan Sarandon
Susan SarandonOriginal
2024-10-31 06:16:30760Durchsuche

How to Push Elements onto an Array in React's useState Hook?

Verwenden von Push-in-React-Hooks (useState)

Bei Verwendung des useState-Hooks von React können Sie ein Array-Statuselement mithilfe der Set-Funktion ändern bietet. Dies steht im Gegensatz zum älteren Ansatz der Verwendung von setState, bei dem das gesamte Statusobjekt auf einmal geändert wurde.

Um ein Element auf das Array zu verschieben, können Sie ein neues Array oder einen Rückruf übergeben, der das neue Array erstellt Funktion festlegen.

Rückrufformular (empfohlen)

Diese Methode wird bevorzugt, da sie garantiert, dass React alle asynchronen Aktualisierungen oder Stapelverarbeitung verarbeitet, die auftreten können:

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

Formular ohne Rückruf (nur diskrete Ereignisse)

In bestimmten Fällen, in denen Sie das Array ausschließlich als Reaktion auf „diskrete Ereignisse“ aktualisieren, können Sie sich abmelden des Rückrufformulars:

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

Diskrete Ereignisse

Die diskreten Ereignisse, für die React das Rendern des Flushs garantiert, sind:

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

Beispiel

Das folgende Beispiel demonstriert die Push-Methode in 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>

Durch die Verwendung von Push Mit der Methode in useState können Sie Arrays in Ihren React-Komponenten bequem aktualisieren und so einen reibungslosen und effizienten Datenfluss sicherstellen.

Das obige ist der detaillierte Inhalt vonWie schiebe ich Elemente im useState-Hook von React auf ein Array?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn