So aktualisieren Sie den verschachtelten Status in React: Eine Schritt-für-Schritt-Anleitung

Aktualisieren des verschachtelten Zustands in React

Im Kontext einer React-Anwendung kann es vorkommen, dass Sie eine bestimmte Eigenschaft von aktualisieren müssen ein tief verschachteltes Zustandsobjekt. Ein solches Szenario ist die Erstellung eines Formulars, in dem Benutzer Felder definieren und verschiedene Details angeben können.

Szenario:

Sie haben ein Anfangszustandsobjekt, das Formularfelder darstellt, wobei jedes Das Feld wird durch einen Schlüssel identifiziert und verfügt über Eigenschaften wie Name und Populate_at. Sie möchten es Benutzern ermöglichen, diese Eigenschaften zu ändern, wenn sie mit den Formularsteuerelementen interagieren.

Herausforderung:

Das Targeting des spezifischen Objekts, das im Status aktualisiert werden soll, kann insbesondere eine Herausforderung sein bei Verwendung verschachtelter Objekte.

Lösung:

Um state.item[1].name zu aktualisieren, können Sie die folgenden Schritte verwenden:

1. Erstellen Sie eine flache Kopie des Statusobjekts:

<code class="javascript">let items = [...this.state.items];</code>

2. Erstellen Sie eine flache Kopie des spezifischen Elements, das Sie aktualisieren möchten:

<code class="javascript">let item = {...items[1]};</code>

3. Ersetzen Sie die gewünschte Eigenschaft in der Kopie:

<code class="javascript">item.name = 'newName';</code>

4. Fügen Sie das aktualisierte Element wieder in die Kopie des Statusobjekts ein:

<code class="javascript">items[1] = item;</code>

5. Stellen Sie den Status auf die geänderte Kopie ein:

<code class="javascript">this.setState({items});</code>

Alternativ können Sie die Schritte 2 und 3 in einer einzigen Zeile kombinieren:

<code class="javascript">let item = {...items[1], name: 'newName'};</code>

Einzeilige Lösung :

So können Sie die gesamte Aktualisierung in einer Zeile mit Array-Spread-Operatoren durchführen:

<code class="javascript">this.setState(({items}) => ({
    items: [
        ...items.slice(0, 1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));</code>

Hinweis:

Das ist es Es ist wichtig zu beachten, dass das Statusobjekt in Ihrem Beispiel mithilfe einfacher Objekte strukturiert ist. In modernen React-Anwendungen wird empfohlen, den useState-Hook oder Redux für die Statusverwaltung zu verwenden.

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie den verschachtelten Status in React: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!