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

React でのネストされた状態プロパティの変更

ネストされた状態プロパティは、React の複雑な状態構造の論理構成を提供します。ただし、this.setState を使用してこれらのプロパティを直接更新しようとしても、望ましい結果は得られません。

解決策:

ネストされた状態プロパティを正しく更新するには、次の手順に従います。状態の不変性を保持します:

1. Copy:

   • スプレッド演算子を使用して、ネストされたプロパティを新しい変数にコピーします (例: var someProperty = {...this.state.someProperty}.

2. を変更しますコピー:

   コピーしたプロパティに必要な変更を加えます (例: someProperty.flag = true.

3. Update)状態:

   を更新しますコンポーネントの状態を、変更されたコピーに設定して取得します (例: this.setState({someProperty}))。

高度にネストされた状態の場合:

状態が深くネストされている場合、各レベルでスプレッド演算子を使用するのは非現実的です。よりエレガントな更新のために immutability-helper パッケージの使用を検討してください:

this.setState(prevState => ({
  ...prevState,
  someProperty: {
    ...prevState.someProperty,
    someOtherProperty: {
      ...prevState.someProperty.someOtherProperty,
      anotherProperty: {
        ...prevState.someProperty.someOtherProperty.anotherProperty,
        flag: false
      }
    }
  }
}));

Immutability-Helper:

immutability-helper パッケージは、より簡潔で直感的な構文を提供します。ネストされた状態プロパティの更新:

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