React中多个子组件同时调用setState的状态同步问题

这个问题我之前也踩过坑！核心原因是React的setState是异步批量更新的：当两个子组件在componentDidMount阶段同时调用父组件的updateElements时，两次更新都会基于同一个初始的this.state.elements（空数组）进行操作，最终只会保留最后一次的修改，导致状态没有正确累加。

要实现“等前一次状态设置完成再执行下一次更新”的效果，最靠谱的是用下面两种方法：

方法一：用函数式更新（推荐） #

React的setState支持传入一个函数，这个函数会自动接收最新的前一次状态，你只需要基于这个最新状态返回新的状态对象就行。这样不管多少个子组件同时触发更新，每一次都会拿到最准确的状态，不会出现覆盖。

修改父组件的updateElements方法：

updateElements: function(element) {
  this.setState(prevState => ({
    elements: [...prevState.elements, element]
  }));
}

这里用展开运算符...复制之前的数组，再把新元素加进去，完全依赖React提供的prevState来计算新状态，彻底避免异步更新的坑。

方法二：利用setState的回调（适合需要后续操作的场景） #

如果你需要在状态更新完成后执行某些逻辑，可以用setState的第二个参数（回调函数），但对于你的多子组件同时调用的场景，函数式更新已经足够简洁。不过还是给你举个例子：

updateElements: function(element, callback) {
  this.setState(prevState => ({
    elements: [...prevState.elements, element]
  }), callback); // 状态更新完成后执行回调
}

但要注意，这种方式在多子组件同时调用的场景下，没必要特意串行，函数式更新已经能保证状态正确累加。

补全后的完整代码 #

另外，你原来的代码里Content组件没初始化elements状态，这会导致第一次调用时报错，我一起补上了：

var Content = React.createClass({
  getInitialState: function() {
    // 必须初始化状态，不然第一次调用this.state.elements会是undefined
    return { elements: [] };
  },
  updateElements: function(element) {
    this.setState(prevState => ({
      elements: [...prevState.elements, element]
    }));
  },
  render: function() {
    const elements = ["a", "b"];
    return (
      <div>
        <Element updateElements={this.updateElements} data={elements[0]} />
        <Element updateElements={this.updateElements} data={elements[1]} />
      </div>
    );
  }
});

var Element = React.createClass({
  componentDidMount: function() {
    this.props.updateElements(this.props.data);
  },
  render: function() {
    return (
      <div>
        {this.props.data}
      </div>
    );
  }
});

ReactDOM.render(
  <Content />,
  document.getElementById('container')
);

这样修改后，不管多少个子组件调用updateElements，elements状态都会正确累加，不会出现覆盖的问题。

内容的提问来源于stack exchange，提问作者technoch1ef