如何在 React State 中不可變地更新數組中的物件？

更新ReactJS 陣列中的狀態物件

將陣列作為應用程式狀態的一部分使用時，您可能會遇到更新單一物件的需要在這些數組中。這是管理使用者資料、表單值或其他動態內容時的常見任務。

處理狀態更新

在提供的範例中，CommentBox 元件定義為包含註解物件陣列的初始狀態。 handleCommentEdit 函數負責使用指定的 id 和文字更新註解。

React 中的不變性

React 的核心原則之一是使用不可變狀態。這意味著原始狀態物件永遠不應該被直接改變。相反，必須建立一個具有所需變更的新狀態物件。

使用 Object.assign 更新物件

更新陣列中物件的一種方法是使用Object.assign 方法。此方法將現有物件作為第一個參數，並將後續參數作為應合併到原始物件中的鍵值對。產生的物件是一個具有所需變更的新物件。

在提供的程式碼片段中，此方法的實作如下：

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

使用Spread 更新及更高版本🎜>

在ES2018 及更高版本中，可以使用擴充運算子(...) 來實現與Object.assign 類似的結果。擴充運算子將現有物件的屬性與提供的鍵值對合併。

以下程式碼片段展示如何使用擴充運算子來更新評論物件：

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

結論

這些技術允許您輕鬆更新ReactJS🎜>

這些技術允許您輕鬆更新ReactJS數組中的單一對象，同時遵守不變性框架的原則。

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