javascript - 可能的竞赛条件调用setState

displayModal的值始终是后面的值。可能是比赛条件。我在updateModal的回调函数中调用setState，因此不会发生竞争情况。

      addAccrual: function() {
        console.log('setting modal to display true');
          this.setState({displayModal: 1}, this.updateModal());
      },

      saveAddAccrual: function() {
        console.log('setting modal to display false');
          this.setState({displayModal: 0}, this.updateModal());
      },

      cancelAddAccrual: function() {
        console.log('setting modal to display false');
          this.setState({displayModal: 0}, this.updateModal());
      },

  updateModal: function() {
    console.log("state of displayModal: " + this.state.displayModal);
    if(this.state.displayModal){
      console.log('showing modal');
      $('#myModalOverlay').show();
      $('#myReactModal').show();
    }else{
      console.log('hiding modal');
      $('#myModalOverlay').hide();
      $('#myReactModal').hide();
    }
  },

例如。


  设置模式以显示true
  displayModal状态：0
  隐藏模态


HTML / JSX

<button className="ay-btn" id="addAccrualButton" onClick={this.addAccrual}>Add Accrual</button>

<button className="btn" type="button" onClick={this.cancelAddAccrual}><i className="icon-remove"></i>Cancel</button>

<button className="btn-primary btn" type="button" onClick={this.saveAddAccrual}><i className="icon-white icon-ok"></i>Save</button>

最佳答案

您的问题可能是这样的：

this.setState({displayModal: 1}, this.updateModal());

我假设您要在成功设置状态后调用updateModal。上面的代码行没有这样做，因为您将updateModal的结果作为回调传递。

更改为：

this.setState({displayModal: 1}, this.updateModal); // no ()

并且您应该看到预期的行为。