如何在 React 中高效率更新深度嵌套的狀態屬性？

React 中使用巢狀屬性進行深度狀態更新

在React 管理狀態時，通常會將資料組織到巢狀屬性中以實現更好的組織。然而，直接更新深層嵌套的狀態屬性可能會導致意想不到的後果。

問題：

考慮以下狀態結構：

this.state = {
   someProperty: {
      flag: true
   }
}

使用下列方法更新狀態：

this.setState({ someProperty.flag: false });

. ..將無法如預期般運作。 React 的 setState 方法不處理巢狀更新。

解決方案：克隆和更新

一個解決方案是克隆嵌套屬性，執行更新，然後設定更新的狀態中的屬性：

var someProperty = {...this.state.someProperty}
someProperty.flag = false;
this.setState({someProperty})

擴充運算子(...) 建立物件的淺表副本。然而，如果你的狀態變得深度嵌套，這種方法可能會變得乏味且容易出錯。

Immutability Helper

對於更複雜的巢狀狀態更新，請考慮使用不變性- 幫助程式包。它提供了一種便捷的方式來不可變地更新嵌套對象，確保原始狀態不會發生變化。

例如，使用immutability-helper 更新深度嵌套的屬性：

this.setState(({someProperty}) => {
   return update(someProperty, { $set: { flag: false } })
})

不變性-helper 確保原始someProperty 物件未被修改，而是傳回一個帶有更新後的標誌屬性的新物件。

以上是如何在 React 中高效率更新深度嵌套的狀態屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！