React で深くネストされた状態プロパティを効率的に更新するにはどうすればよいですか?

ネストされたプロパティを使用した React のディープ ステート更新

React で状態を管理する場合、より適切に組織化するためにデータをネストされたプロパティに整理するのが一般的です。ただし、深くネストされた状態プロパティを直接更新すると、意図しない結果が生じる可能性があります。

問題:

次の状態構造を考えてみましょう:

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

このアプローチを使用して状態を更新する:

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

... としては機能しません。意図した。 React の setState メソッドは、ネストされた更新を処理しません。

解決策: クローン作成と更新

1 つの解決策は、ネストされたプロパティをクローンし、更新を実行し、更新されたプロパティを設定することです。状態のプロパティ:

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

スプレッド演算子 (...) はオブジェクトの浅いコピーを作成します。ただし、状態が深くネストされると、このアプローチは退屈でエラーが発生しやすくなる可能性があります。

不変ヘルパー

より複雑なネストされた状態の更新については、不変ヘルパーの使用を検討してください。 -ヘルパーパッケージ。これは、元の状態が変更されないように、ネストされたオブジェクトを不変に更新する便利な方法を提供します。

たとえば、immutability-helper を使用して深くネストされたプロパティを更新するには:

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

Immutability -helper は、元の someProperty オブジェクトが変更されないようにしますが、代わりに、更新されたフラグ プロパティを持つ新しいオブジェクトが返されるようにします。

以上がReact で深くネストされた状態プロパティを効率的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。