Question

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();
    }
  },

E.G。

设置模式以显示真实   显示状态模式：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>

Answer 1

你的问题可能是这样的：

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

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

将其更改为：

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

你应该看到你期望的行为。

调用setState的可能竞争条件

1 个答案: