这.SetState没有像我预期的那样合并状态

Question

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

然后更新状态：

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

由于setstate应该合并，我希望它是：

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

但相反,它会吃掉id,状态为：

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

这是预期的行为吗？只更新嵌套状态对象的一个属性的解决方案是什么？

Answer 1

我认为setstate()不执行递归合并。

您可以使用当前状态this.state.selected的值构造一个新状态，然后对其调用setstate():

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

我在这里使用了函数_.extend()函数（来自Underscore.js库），通过创建状态中现有的selected部分的浅拷贝来防止对其进行修改。

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