☰

Reactでネストされた状態プロパティを更新する方法 質問する

tag-icon • tag-icon javascript reactjs ecmascript-6 setstate
Reactでネストされた状態プロパティを更新する方法 質問する

次のようにネストされたプロパティを使用して状態を整理しようとしています。

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

しかし、このように状態を更新すると、

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

動作しません。これを正しく行うにはどうすればいいでしょうか?

ベストアンサー1

ネストされたオブジェクトの場合は、setStatesetState がネストされた更新を処理しないと思われるため、以下のアプローチに従うことができます。

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

アイデアは、ダミーオブジェクトを作成し、それに対して操作を実行し、コンポーネントの状態を更新されたオブジェクトに置き換えることです。

現在、スプレッド演算子はオブジェクトの 1 レベルのネストされたコピーのみを作成します。状態が次のように高度にネストされている場合:

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

各レベルでスプレッド演算子を使用してsetStateを実行することができます。

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

しかし、上記の構文は状態がネストされるにつれて醜くなってしまうので、immutability-helper状態を更新するパッケージ。

見るこの答え状態を更新する方法についてimmutability-helper。

おすすめ記事