正确处理多个顺序状态更新

Question

这个例子有点做作，但请耐心等待。假设我有两个函数作为 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 吗？这对我来说有点笨拙，我想知道我是否缺少一个更简单的解决方案。

Answer 1

您永远不应this.setState在组件内的给定执行线程中多次调用。

所以你有几个选择：

使用 forceUpdate 而不是 setState

您不必使用this.setState- 您可以直接修改状态并this.forceUpdate在完成后使用。

这里要记住的主要事情是，this.state一旦开始直接修改它，就应该将其视为已污染。IE：不要使用状态或您知道已修改的属性，直到您调用this.forceUpdate. 这通常不是问题。

当您处理this.state. 就我个人而言，我不是一个超级粉丝，React.addons.update因为我发现语法非常笨拙。我更喜欢直接修改和forceUpdate.

创建一个您传递的对象，直到最终在 setState 中使用它

收集所有更改的对象，以this.setState在执行线程结束时传递给它。