Wie schiebe ich Elemente mit dem useState Hook von React in Zustandsarrays?

Elemente mit React Hooks (useState) in Zustandsarrays verschieben

Der React useState-Hook bietet einen Mechanismus zur Statusverarbeitung innerhalb funktionaler Komponenten. Im Gegensatz zu Klassenkomponenten, bei denen Sie this.setState() verwenden, um den Status zu aktualisieren, führt useState eine Statusaktualisierungsfunktion ein, um den Status einer Komponente zu ändern.

So verschieben Sie ein Element in einen Array-Status

Um ein Element mithilfe von useState in einen Array-Status zu verschieben, können Sie die folgenden Schritte ausführen:

1. Initialisieren Sie Ihren Status mit einem Array mithilfe des useState-Hooks:

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

   Nach dem Login kopieren
2. Erstellen Sie eine Statusaktualisierungsfunktion namens setTheArray, mit der Sie den Array-Status ändern können.

3. Um ein Element in das Array zu verschieben, rufen Sie setTheArray auf und übergeben Sie eine Funktion, die gibt das aktualisierte Array zurück. Die Funktion sollte den vorherigen Zustand (oldArray) als Argument verwenden:

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

   Nach dem Login kopieren

Callback Form vs. Non-Callback Form

In In den meisten Fällen wird empfohlen, beim Aktualisieren von Arrays innerhalb des Status das Rückrufformular zu verwenden. Dies liegt daran, dass Statusaktualisierungen asynchron erfolgen, was bedeutet, dass ihre Ausführung nicht sofort erfolgt. Durch die Verwendung des Rückrufformulars können Sie sicherstellen, dass für die Array-Aktualisierung immer die neueste Version des Status verwendet wird.

Es gibt jedoch bestimmte Fälle, in denen Sie das Nicht-Rückrufformular problemlos verwenden können. Dies gilt nur, wenn Sie den Array-Status ausschließlich innerhalb von Handlern für bestimmte Benutzerereignisse, wie z. B. Klickereignisse, aktualisieren.

Beispiel für das Pushen eines Elements

Bedenken Sie die folgende Reaktion Komponentenbeispiel, das zeigt, wie ein Element in einen Array-Zustand verschoben wird:

<code class="js">const {useState} = 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>

In diesem Beispiel ruft der addEntryClick-Handler beim Klicken auf die Schaltfläche „Hinzufügen“ setTheArray mit einer Rückruffunktion auf, die ein neues Array mit dem zurückgibt neues Element am Ende angehängt.

Durch die Verwendung der Push-Methode im useState-Hook von React können Sie Status-Arrays effektiv verwalten, unabhängig davon, ob der Inhalt hinzugefügt, entfernt oder geändert wird, um eine effizientere und wartbarere Codebasis zu erreichen.

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