ReactJS 并发 SetState 竞争条件

Question

我有一个像这样的组件结构

<A>
    <B>
        <C/>
        <C/>
    </B>
    <D>
       <E/>
       <E/>
    </D>
</A>

想法是， block E 中组件的操作由组件 A 的函数处理为 A 的状态，然后作为 props 传递给 B 和 C。我知道，更好的方法是使用 Flux、pubsub-js 或其他存储消息系统，但希望有人能解释为什么据我所知正确的解决方案不起作用。

从组件 E 的多个实例同时调用组件 A 的此函数会导致竞争条件，仅状态发生一次变化(而不是每个函数调用都提供一次更改)

updateState(value,index){
   this.setState(update(this.state, {
        a: {
          [index]: {
            b: {
             $set: value
            }
          }
        }
    })
);
}

此处功能更新来自

import update from 'react/lib/update';

糟糕的解决方案违背了 ReactJS 推荐的做法，但效果很好:

updateState(value,index){
   this.state.a[index].b=value;
   this.forceUpdate();
);
}

我的问题是:

这是一个错误，多个同步 setState 会调用竞争条件，还是我在不理解的情况下做错了什么？

Answer 1

您可能希望将一个函数传递给 setState 来消除此类竞争条件。像这样的东西:

this.setState(prevState => {
  return {
    someProp: prevState.someProp + 1,
  };
});

即使应用程序的两个不同部分同时执行此操作，两个函数仍将被调用，并且 someProp 将递增两次。

如果你要这样做:this.setState({someProp: this.state.someProp + 1})它只能增加一次，因为this.state.someProp 在调用 setState 后不会直接更新。但是，当将函数传递给 setState 时，您将获得先前的状态作为参数，这可以让您避免数据争用。