this.setState没有像我期望的那样合并状态怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (69)

我有以下状态:

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

然后我更新状态:

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

由于setState是假设合并我期望它是:

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

但相反,它吃的ID和国家是:

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

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

提问于
用户回答回答于

我认为setState()不会做递归合并。

你可以使用当前状态的值this.state.selected构造一个新状态,然后调用setState()它:

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

我在这里使用了函数_.extend()function(来自underscore.js库),selected通过创建它的浅表副本来防止修改状态的现有部分。

另一种解决方案是编写setStateRecursively()一个新的状态递归合并,然后调用replaceState()它:

setStateRecursively: function(stateUpdate, callback) {
  var newState = mergeStateRecursively(this.state, stateUpdate);
  this.replaceState(newState, callback);
}
用户回答回答于

可以执行如下操作:

var newState = React.addons.update(this.state, {
  selected: {
    name: { $set: 'Barfoo' }
  }
});
this.setState(newState);

扫码关注云+社区