反應更新狀態如何？

我遇到了一個很奇怪的問題，我不知道如何解決。反應更新狀態如何？

我有一個非常簡單的方法：當按下一個按鈕叫toggleInverted()

toggleInverted() { 
    if(this.state.inverted){ 
    this.setState({inverted: false}); 
    } else{ 
    console.log("got to else..."); 
    this.setState({inverted: true}); 
    console.log(this.state.inverted); 
    } 
}

倒場是在構造函數初始化爲false。但是，當我加載頁面時，第一次單擊按鈕時，它不會正確地重置狀態。輸出是： got to else... false。

所以不知它是進入這個else語句，執行setState，並且尚未設置反轉是真實的......

有什麼關於setState，我很想念？

來源

2017-02-18 Tevon Strand-Brown

setState不會立即更改您的組件狀態。您的狀態更改可能是異步的，因此不能保證您的console.log語句將打印已更改的狀態。但是總是會導致render方法被調用，所以如果您在您的組件的render方法內控制檯登錄狀態，則您的狀態應該爲true。

另外，this.setState({inverted: !this.state.inverted})是您的代碼的更短版本snippit

來源

2017-02-18 02:03:12 kswc

謝謝！我會按照你的建議縮短它的長度。我用longform來100％確定它不是那種讓它搞砸的邏輯。 –

setStatemay be asynchronous

這意味着你不能指望的this.state值改變setState被稱爲後。

引述docs：

的setState（）不會立即發生變異this.state而是創建一個掛起狀態轉變。調用此方法後訪問this.state有可能返回現有值...

順便說一句，你可以使用目前的反轉值陰性表達如下圖你的代碼：

toggleInverted() { 
    this.setState({inverted: !this.state.inverted}); 
}

來源

2017-02-18 02:02:27 Pineda

反應更新狀態如何？

回答

相關問題