Wie aktualisiere ich Objekte innerhalb eines ReactJS-Array-Status effizient?

Aktualisieren von Objekten im ReactJS-Array: Eine eingehende Untersuchung

In ReactJS enthalten Arrays innerhalb des Status häufig Objekte. Das Aktualisieren dieser Objekte kann eine Herausforderung sein. In diesem Artikel wird eine effektive Methode zur Lösung dieser Aufgabe beschrieben.

Das Problem verstehen

Betrachten Sie das folgende Beispiel:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, author: "john", text: "foo" },
      { id: 2, author: "bob", text: "bar" }
    ]};
  },
  handleCommentEdit: function(id, text) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}

Die Funktion handleCommentEdit ist für die Aktualisierung der Texteigenschaft eines Kommentarobjekts mit einer bestimmten ID verantwortlich. Es stellt sich jedoch die Frage: Wie erstellen wir eine Reihe aktualisierter Kommentare?

Eine robuste Lösung

Eine effiziente Lösung beinhaltet die Verwendung von Object.assign:

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

Dieses Code-Snippet wird den vorhandenen Kommentaren zugeordnet und behält alle unveränderten Objekte bei. Für das Objekt mit der passenden ID wird ein neues Objekt mit der aktualisierten Texteigenschaft erstellt, während die ursprünglichen Eigenschaften beibehalten werden.

ES2018-Verbesserungen

Für diejenigen, die das neueste JavaScript verwenden Funktionen bietet ES2018 mit Spread eine noch prägnantere Lösung:

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

Mit Spread kann das aktualisierte Objekt durch einfaches Ersetzen erstellt werden die vorhandene Texteigenschaft.

Fazit

Das Aktualisieren von Objekten innerhalb von Arrays in ReactJS erfordert einen sorgfältigen Umgang mit der Unveränderlichkeit von Objekten. Durch die Nutzung von Object.assign oder spread können Entwickler Objekteigenschaften effizient aktualisieren und gleichzeitig die Integrität des ursprünglichen Arrays wahren. Diese Methoden bieten eine robuste und prägnante Lösung für diese häufige ReactJS-Programmierherausforderung.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich Objekte innerhalb eines ReactJS-Array-Status effizient?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!