时间戳

首页 > 解决方案 > 同时调用相同的 this.setState 函数

javascript - 同时调用相同的 this.setState 函数

问题描述

我有一个问题，即 setState 被各种子组件同时调用

这是一些过于简单的代码：

var Content = React.createClass({
  updateElements: function(element) {
    elements = [].concat(this.state.elements)
    elements.push(element)
    this.setState({ elements })
  }

  render: function() {
    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')
);

我可以在再次更新之前以某种方式等待之前的状态设置吗？

标签： javascriptreactjsstate

解决方案

我不完全确定，但这应该可以。如果你这样做 setState 这样

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

它不会是同步的，但它应该保留元素而不覆盖它（因为同时更新），因为它将取自 prevState。

推荐阅读