Wie aktualisiere ich Objekte in Arrays im Reaktionszustand unveränderlich?

Statusobjekte in ReactJS-Arrays aktualisieren

Wenn Sie mit Arrays als Teil des Anwendungsstatus arbeiten, müssen Sie möglicherweise einzelne Objekte aktualisieren innerhalb dieser Arrays. Dies ist eine häufige Aufgabe bei der Verwaltung von Benutzerdaten, Formularwerten oder anderen dynamischen Inhalten.

Umgang mit Statusaktualisierungen

Im bereitgestellten Beispiel wird eine CommentBox-Komponente mit definiert ein Anfangszustand, der ein Array von Kommentarobjekten enthält. Die Funktion handleCommentEdit ist für die Aktualisierung des Kommentars mit der angegebenen ID und dem angegebenen Text verantwortlich.

Unveränderlichkeit in React

Eines der Kernprinzipien von React ist die Verwendung eines unveränderlichen Zustands. Dies bedeutet, dass das ursprüngliche Zustandsobjekt niemals direkt mutiert werden sollte. Stattdessen muss ein neues Statusobjekt mit den gewünschten Änderungen erstellt werden.

Objekt mit Object.assign aktualisieren

Ein Ansatz zum Aktualisieren eines Objekts innerhalb eines Arrays ist die Verwendung von die Object.assign-Methode. Diese Methode verwendet das vorhandene Objekt als erstes Argument und nachfolgende Argumente als Schlüssel-Wert-Paare, die mit dem ursprünglichen Objekt zusammengeführt werden sollen. Das resultierende Objekt ist ein neues Objekt mit den gewünschten Änderungen.

Im bereitgestellten Code-Snippet wird dieser Ansatz wie folgt implementiert:

handleCommentEdit: function(id, text) {
    this.setState({
      data: this.state.data.map(el => (el.id === id ? Object.assign({}, el, { text }) : el))
    });
}

Objekt mithilfe von Spread aktualisieren

In ES2018 und höher kann der Spread-Operator (...) verwendet werden, um ein ähnliches Ergebnis wie Object.assign zu erzielen. Der Spread-Operator führt die Eigenschaften des vorhandenen Objekts mit den bereitgestellten Schlüssel-Wert-Paaren zusammen.

Der folgende Codeausschnitt zeigt, wie Sie den Spread-Operator verwenden, um das Kommentarobjekt zu aktualisieren:

this.setState({
  data: this.state.data.map(el => (el.id === id ? {...el, text} : el))
});

Fazit

Mit diesen Techniken können Sie einzelne Objekte innerhalb eines Arrays in ReactJS einfach aktualisieren und dabei die einhalten Unveränderlichkeitsprinzipien des Frameworks.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich Objekte in Arrays im Reaktionszustand unveränderlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!