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

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!