[解決済み] Reactコンポーネントのstateにオブジェクトを格納する？

質問

Reactコンポーネントのstateにオブジェクトを格納することは可能でしょうか？もし可能なら、そのオブジェクトのキーの値を変更するには setState ? のような書き方は構文的に許されないと思うのですが。

this.setState({ abc.xyz: 'new value' });

似たような路線で、もう一つ質問があります。Reactコンポーネントで変数のセットを持ち、それらを状態に格納するのではなく、コンポーネントの任意のメソッドで使用できるようにすることは問題ないでしょうか？

これらのすべての変数を保持する単純なオブジェクトを作成し、コンポーネント上の任意のメソッドを宣言する方法と同様に、コンポーネントレベルに配置することができます。

コードに多くのビジネスロジックを含む場合、いくつかのメソッドによって値が変更される多くの変数を使用する必要があり、これらの値に基づいてコンポーネントの状態を変更するような状況に出くわす可能性が非常に高いのです。

そこで、これらすべての変数を状態として保持するのではなく、値が直接UIに反映されるべき変数のみを保持するのです。

このやり方が、ここで書いた最初の質問よりも優れているのであれば、ステートにオブジェクトを保存する必要はないですね。

どのように解決するのですか？

kiranさんの投稿の他に 更新ヘルパー (以前は リアクトアドオン ). これは、npmで npm install immutability-helper

import update from 'immutability-helper';

var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});

これは、更新された値を持つ新しいオブジェクトを作成し、他のプロパティはそのままです。 これは、配列へのプッシュと同時に他の値を設定するようなことをする必要がある場合に、より便利です。 不変性を提供するため、あらゆる場所でこれを使用する人もいます。

このようにすると、パフォーマンスを補うために

shouldComponentUpdate: function(nextProps, nextState){
   return this.state.abc !== nextState.abc; 
   // and compare any props that might cause an update
}