Wie kann ich Objekte innerhalb eines Arrays in ReactJS effizient aktualisieren?

Aktualisieren von Objekten in einem Array in ReactJS: Eine umfassende Anleitung

In ReactJS kann das Aktualisieren von Objekten innerhalb dieser Arrays beim Umgang mit Arrays als Teil des Zustands ein Problem sein herausfordernde Aufgabe. Dieser Artikel bietet Ihnen eine optimale Lösung für dieses Problem.

Betrachten Sie das im Tutorial vorgestellte 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});
  }
}

Um ein Objekt im Array „data“ zu aktualisieren, verwenden wir das „map“-Methode in der Variable „updateComments“:

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

Dieser Ansatz verwendet „Object.assign“, um das vorhandene Objekt mit den aktualisierten Eigenschaften zusammenzuführen und so Unveränderlichkeit sicherzustellen. Alternativ können Sie sich für den „Spread“-Operator entscheiden, der mit ES2018 kompatibel ist:

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

Durch Befolgen dieser Techniken können Sie Objekte in Arrays in Ihren ReactJS-Anwendungen mühelos aktualisieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Objekte innerhalb eines Arrays in ReactJS effizient aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!