Wie aktualisiere ich Objekte in Arrays in ReactJS elegant?

Elegante Objektaktualisierungen in Arrays für ReactJS

In ReactJS kann die Verwaltung von Arrays von Objekten innerhalb des Status Ihrer Anwendung ein häufiges Szenario sein. Eine solche Aufgabe ist das Aktualisieren eines bestimmten Objekts innerhalb eines Arrays, was ohne ein klares Verständnis der verfügbaren Techniken eine Herausforderung darstellen kann.

Beispielszenario

Betrachten Sie die folgende Reaktion Komponentenbeispiel:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {
      data: [
        { id: 1, author: "john", text: "foo" },
        { id: 2, author: "bob", text: "bar" },
      ],
    };
  },
  handleCommentEdit: function(id, text) {
    // Handle updating of the object inside the array
  },
});

Das Ziel besteht darin, das Objekt in this.state.data zu aktualisieren, wenn die handleCommentEdit-Methode aufgerufen wird, und insbesondere das zu ändern Texteigenschaft.

Object.assign()-Ansatz

Eine häufig bevorzugte Methode ist die Verwendung von Object.assign(). Es bietet eine übersichtliche Möglichkeit, ein vorhandenes Objekt zu aktualisieren, ohne ein neues zu erstellen.

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

Hier durchlaufen wir jedes Element in this.state.data. Wenn die ID eines Elements mit der angegebenen ID übereinstimmt, erstellen wir ein neues Objekt, indem wir mithilfe von Object.assign() die ursprüngliche EL mit dem aktualisierten Text kombinieren. Andernfalls geben wir das ursprüngliche Element zurück.

Spread-Operator-Ansatz

Für einen moderneren Ansatz können Sie den ES2018-Spread-Operator verwenden:

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

Ähnlich wie bei der Object.assign()-Methode verwenden wir den Spread-Operator, um ein neues Objekt zu erstellen, indem wir das ursprüngliche Objekt mit dem aktualisierten Text kombinieren Eigenschaft.

Sowohl der Object.assign()- als auch der Spread-Operator-Ansatz bieten eine effiziente und elegante Möglichkeit, Objekte innerhalb eines Arrays zu aktualisieren und gleichzeitig die Unveränderlichkeit in ReactJS-Anwendungen aufrechtzuerhalten.

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