可能的競態條件調用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

回答

相關問題