this.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()function（来自underscore.js库），selected通过创建状态的浅表副本来防止对该状态的现有部分进行修改。

另一种解决方案是编写setStateRecursively()对新状态进行递归合并，然后对其进行调用replaceState()：

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