如何在 ReactJS 中優雅地更新數組中的物件？

ReactJS 陣列中的優雅物件更新

在ReactJS 中，管理應用程式狀態中的物件陣列可能是一種常見的場景。其中一項任務是更新數組中的特定對象，如果不清楚可用技術，這可能會帶來挑戰。

範例場景

考慮以下React元件範例：

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
  },
});

目的是當handleCommentEdit方法為時更新this.state.中的物件調用，專門修改文字屬性。

Object.assign() 方法

通常首選的方法是使用 Object.assign()。它提供了一種簡潔的方法來更新現有對象，而無需建立新對象。

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

在這裡，我們迭代 this.state.data 中的每個元素。如果元素的 id 與提供的 id 匹配，我們將使用 Object.assign() 將原始 el 與更新後的文字結合來建立一個新物件。否則，我們返回原始元素。

擴充運算子方法

對於更現代的方法，您可以使用 ES2018 擴充運算子：

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

與Object.assign()方法類似，我們使用展開運算子建立一個新對象，將原始物件與更新後的文字組合起來

Object.assign() 和展開運算子方法都提供了一種高效且優雅的方法來更新數組中的對象，同時保持ReactJS 應用程式中的不變性。

以上是如何在 ReactJS 中優雅地更新數組中的物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！