我有以下状态:
this.setState({ selected: { id: 1, name: 'Foobar' } });
然后我更新状态:
this.setState({ selected: { name: 'Barfoo' }});
由于setState
是要合并的,所以我希望它是:
{ selected: { id: 1, name: 'Barfoo' } };
但是相反,它会吃掉id,状态是:
{ selected: { name: 'Barfoo' } };
这是预期的行为吗?只更新嵌套状态对象的一个属性的解决方案是什么?
发布于 2013-09-21 23:17:27
我认为setState()
不做递归合并。
您可以使用当前状态this.state.selected
的值来构造一个新状态,然后对其调用setState()
:
var newSelected = _.extend({}, this.state.selected);
newSelected.name = 'Barfoo';
this.setState({ selected: newSelected });
我在这里使用了function _.extend()
function (来自underscore.js库),通过创建状态的浅层副本来防止对状态的现有selected
部分进行修改。
另一种解决方案是编写setStateRecursively()
,它在新的状态上执行递归合并,然后用它调用replaceState()
:
setStateRecursively: function(stateUpdate, callback) {
var newState = mergeStateRecursively(this.state, stateUpdate);
this.replaceState(newState, callback);
}
发布于 2014-09-08 02:21:26
React.addons中最近添加了不变性帮助器,因此,您现在可以执行以下操作:
var newState = React.addons.update(this.state, {
selected: {
name: { $set: 'Barfoo' }
}
});
this.setState(newState);
发布于 2017-07-22 03:13:29
我不想安装另一个库,所以这里有另一个解决方案。
而不是:
this.setState({ selected: { name: 'Barfoo' }});
改为执行以下操作:
var newSelected = Object.assign({}, this.state.selected);
newSelected.name = 'Barfoo';
this.setState({ selected: newSelected });
或者,感谢评论中的@icc97,甚至更简洁,但可读性较差:
this.setState({ selected: Object.assign({}, this.state.selected, { name: "Barfoo" }) });
另外,要明确的是,这个答案并没有违反@bgannonpl上面提到的任何问题。
https://stackoverflow.com/questions/18933985
复制相似问题