[解決済み] this.setStateは私が期待するように状態をマージしていません。

質問

次のような状態になっています。

this.setState({ selected: { id: 1, name: 'Foobar' } });  

そして、状態を更新する。

this.setState({ selected: { name: 'Barfoo' }});

以降 setState はマージするものと思っていたのですが、そうではありませんでした。

{ selected: { id: 1, name: 'Barfoo' } }; 

しかし、その代わりにidを食ってしまい、stateが。

{ selected: { name: 'Barfoo' } }; 

また、ネストされたステート・オブジェクトの1つのプロパティのみを更新するための解決策は何でしょうか？

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

私が思うに setState() は再帰的なマージを行いません。

現在の状態の値を使用することができます this.state.selected を呼び出して新しい状態を構築し、その状態で setState() を追加しました。

var newSelected = _.extend({}, this.state.selected);
newSelected.name = 'Barfoo';
this.setState({ selected: newSelected });

私は、関数 _.extend() 関数(underscore.js ライブラリ)を使用することで、既存の selected の部分を浅いコピーで作成します。

別の解決策としては setStateRecursively() これは、新しい状態に対して再帰的なマージを行い、次に replaceState() を使用します。

setStateRecursively: function(stateUpdate, callback) {
  var newState = mergeStateRecursively(this.state, stateUpdate);
  this.replaceState(newState, callback);
}