可能的竞态条件调用setState

displayModal的值始终为后面的值。可能是一种竞争条件。我呼叫updateModal在setState回调，所以不应该发生竞争条件。可能的竞态条件调用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.

设置模式，以显示真正的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>

来源

2016-02-29 P.Brian.Mackey

由于多个'setState'调用可以合并为一个'setState'调用。换句话说，不是每个'setState'调用都能保证实际调用你的回调函数。 –

js是单线程的。没有比赛条件。 –

Myeah，事实证明我误解了“this.state的值不保证马上更新”。它是异步的，但它确保在操作完成并调用每个setState调用后调用回调函数。 –

你的问题大概是这样的：

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

我假设你想在状态成功设置后调用updateModal。上面的行不这样做，因为你通过结果的updateModal作为回调。

将其更改为：

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

，你应该看到您所期望的行为。

来源

2016-02-29 19:04:55 rossipedia

哇。甚至没有照顾过这样的东西。 –

可能的竞态条件调用setState

回答

相关问题