this.setState没有像我预期的那样合并状态
this.setState没有像我预期的那样合并状态
提问于 2013-09-21 22:50:47
我有以下状态：
this.setState({ selected: { id: 1, name: 'Foobar' } }); 然后我更新状态：
this.setState({ selected: { name: 'Barfoo' }});由于setState是要合并的，所以我希望它是：
{ selected: { id: 1, name: 'Barfoo' } }; 但是相反，它会吃掉id，状态是：
{ selected: { name: 'Barfoo' } }; 这是预期的行为吗?只更新嵌套状态对象的一个属性的解决方案是什么？
回答 8
Stack Overflow用户
回答已采纳
发布于 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);
}Stack Overflow用户
发布于 2014-09-08 02:21:26
React.addons中最近添加了不变性帮助器，因此，您现在可以执行以下操作：
var newState = React.addons.update(this.state, {
selected: {
name: { $set: 'Barfoo' }
}
});
this.setState(newState);Stack Overflow用户
发布于 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上面提到的任何问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18933985
复制相关文章
相似问题