[解決済み] Reactでネストした状態のプロパティを更新する方法

質問

このようにネストしたプロパティを使って、状態を整理しようとしています。

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

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

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

はうまくいきません。どうすれば正しく動作するのでしょうか？

解決方法を教えてください。

を実現するために setState というのは、setStateはネストされたオブジェクトの更新を扱わないからです。

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

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

さて、spreadオペレータは、オブジェクトのネストされたコピーを1レベルだけ作成します。もし、状態が高度にネストしているような場合は、以下のようになります。

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

のように、各レベルでspread演算子を使ってsetStateすることができます。

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

しかし、上記の構文は、状態がよりネスト化されるにつれて、非常に醜くなります。 immutability-helper パッケージを使用して状態を更新します。

参照 本解答 を使用して状態を更新する方法について説明します。 immutability-helper .