如何有效率地更新 ReactJS 陣列狀態中的物件？

更新 ReactJS 陣列中的物件：深入探索

在 ReactJS 中，狀態中的陣列通常包含物件。更新這些物件可能是一個挑戰。本文深入探討了完成此任務的有效方法。

理解問題

考慮以下範例：

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

handleCommentEdit 函數負責更新具有特定 id 的評論物件的文字屬性。然而，問題出現了：我們如何創建一組更新的評論？

一個強大的解決方案

一個有效的解決方案涉及使用Object.assign:

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

此程式碼片段映射現有註釋，保留所有未更改的物件。對於具有匹配 id 的對象，它會建立一個具有更新的文字屬性的新對象，同時保留原始屬性。

ES2018 增強

對於那些擁抱最新JavaScript 的人功能方面，ES2018 使用spread 提供了更簡潔的解決方案：

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

使用spread，更新後的物件可以透過簡單地替換現有的文字屬性來建立。

結論

在ReactJS中更新陣列中的物件需要仔細處理物件的不變性。透過利用 Object.assign 或 spread，開發人員可以有效地更新物件屬性，同時保持原始陣列的完整性。這些方法為這一常見的 ReactJS 程式設計挑戰提供了強大且簡潔的解決方案。

以上是如何有效率地更新 ReactJS 陣列狀態中的物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！