这个例子有点做作,但请耐心等待。假设我有两个函数作为 React 组件中的成员:
var OrderApp = React.createClass({
getInitialState: function() {
return {
selectedOrders: {},
selectedLineItems: {}
};
},
setOrderSelected: function(order, newSelectedState) {
var mutation = {};
mutation[order.id] = {$set: newSelectedState};
var newSelectedOrders = React.addons(this.state.selectedOrders, mutation);
_.each(order.lineItems, function(lineItem) {
setLineItemSelected(lineItem, newSelectedState);
});
this.setState({selectedOrders: newSelectedOrders});
},
setLineItemSelected: function(lineItem, newSelectedState) {
var mutation = {};
mutation[lineItem.id] = {$set: newSelectedState};
var newSelectedLineItems = React.addons(this.state.selectedLineItems, mutation);
this.setState({seelctedLineItems: newSelectedLineItems});
}
});
调用 OrderApp.setOrderSelected(order, true) 完成时,只有最后一个 lineItem 的选定状态在我的组件状态中似乎发生了变化。我猜这是因为 React 正在批处理对 setState 的调用,所以当我调用时:
var newSelectedLineItems = React.addons(this.state.selectedLineItems, mutation);
在第二个函数中,我每次都选择原始状态,因此只有最后一个突变生效。
我是否应该在父函数中收集所有的状态变化并且只调用一次 setState?这对我来说有点笨拙,我想知道我是否缺少一个更简单的解决方案。
最佳答案
在组件内的给定执行线程中,您永远不应多次调用 this.setState
。
所以你有几个选择:
使用 forceUpdate 而不是 setState
您不必使用 this.setState
- 您可以直接修改状态并在完成后使用 this.forceUpdate
。
这里要记住的主要事情是,一旦开始直接修改它,就应该将 this.state
视为已污染。 IE:在调用 this.forceUpdate
之前,不要使用您知道已修改的状态或属性。这通常不是问题。
当您处理 this.state
中的嵌套对象时,我绝对喜欢这种方法。就我个人而言,我不是 React.addons.update
的 super 粉丝,因为我发现它的语法非常笨拙。我更喜欢直接修改和forceUpdate
。
创建一个您传递的对象,直到最终在 setState 中使用它
收集所有更改的对象,以在执行线程结束时传递给 this.setState
。
关于javascript - 正确处理多个顺序状态更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26183775/