Wie aktualisiere ich verschachtelte Zustandseigenschaften in React korrekt?

Verschachtelte Zustandseigenschaften in React ändern

Verschachtelte Zustandseigenschaften bieten eine logische Organisation für komplexe Zustandsstrukturen in React. Der Versuch, diese Eigenschaften direkt mit this.setState zu aktualisieren, führt jedoch nicht zum gewünschten Ergebnis.

Lösung:

Um verschachtelte Zustandseigenschaften korrekt zu aktualisieren, führen Sie die folgenden Schritte aus Bewahren Sie die Unveränderlichkeit des Staates:

1. Erstellen Sie eine Kopieren:

   • Kopieren Sie die verschachtelte Eigenschaft mithilfe des Spread-Operators in eine neue Variable, z. B. var someProperty = {...this.state.someProperty}.

2. Ändern Sie die Kopieren:

   • Nehmen Sie die erforderlichen Änderungen an der kopierten Eigenschaft vor, z. B. someProperty.flag = true.

3. Aktualisieren der Status:

   • Aktualisieren Sie den Status der Komponente, indem Sie sie auf die geänderte Kopie setzen. z. B. this.setState({someProperty}).

Für stark verschachtelte Zustände:

Wenn der Zustand tief verschachtelt ist, Es ist unpraktisch, den Spread-Operator auf jeder Ebene zu verwenden. Erwägen Sie die Verwendung des Immutability-Helper-Pakets für elegantere Updates:

this.setState(prevState => ({
  ...prevState,
  someProperty: {
    ...prevState.someProperty,
    someOtherProperty: {
      ...prevState.someProperty.someOtherProperty,
      anotherProperty: {
        ...prevState.someProperty.someOtherProperty.anotherProperty,
        flag: false
      }
    }
  }
}));

Immutability-Helper:

Das Immutability-Helper-Paket bietet eine prägnantere und intuitivere Syntax für Verschachtelte Zustandseigenschaften aktualisieren:

import {update} from "immutability-helper";
this.setState(update(this.state, {
  someProperty: {
    someOtherProperty: {
      anotherProperty: {
        flag: {$set: false}
      }
    }
  }
}));

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich verschachtelte Zustandseigenschaften in React korrekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!