2016-09-16 274 views
0

的setState的setState()():問題在if語句中if語句

// morePage = true 
// pageNum = 1 

if(morePage){ 
    this.setState({pageNum: this.state.pageNum+1}) 
} 

console.log(this.state.pageNum); // return: 1 

的setState()出來if語句:

// morePage = true 
// pageNum = 1 

if(morePage){ 
    // ... 
} 
this.setState({pageNum: this.state.pageNum+1}) 

console.log(this.state.pageNum); // return: 2 

我面臨着現在,我想知道爲什麼......

謝謝:)

編輯時,正確答案:

所以,是的,我應該花更多的時間閱讀陣營的文件:P 如果有人想知道如何我終於做到了,這裏就是答案:

在文檔,他們都說沒有保證您的狀態將在重新呈現之前具有新的價值。所以你必須使用「componentDidUpdate()」。

所以我所做的是,我把:

this.setState({pageNum: this.state.pageNum+1}) 

我已經創建了一個隨機函數裏面,之後,在「componentDidUpdate(prevProps,prevState)」功能,我可以訪問新和舊道具價值觀,我可以使用以前的和「頁次」 :)

+0

你應該結帳我的回答如果你不想使用額外的生命週期方法只適用於本。 –

+0

是的,你的答案也應該工作,但我的代碼更大,我有其他的東西需要在componentDidUpdate(),所以這是一個更乾淨的解決方案:) – Leon

回答

2
的setState的電流值()不會立即發生變異this.state而造成掛起狀態轉變。調用此方法後訪問this.state可能會返回現有值。
沒有調用SETSTATE,呼叫可能會分批進行性能提升的同步運行的保證。

如前所述它不能保證狀態值將在代碼的下一行進行更新。

如果您要檢查的狀態進行調試嘗試render方式登錄的話,作爲狀態更新

+1

代碼記錄'pageNum',而不是'this。但是,state.pageNum'。 – robertklep

+0

是啊我的壞,我有「const {pageNum} = this.state;」我的代碼更高:P 已修復! – Leon

0

後的setState當前和以前的狀態合併調用此方法。因此,價值。此外,它的同步,可能會出現意想不到的結果。

0

注:

setState()不會立即發生變異this.state但創建待狀態轉變。調用此方法can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

setState()將總是觸發後訪問this.state重新渲染除非條件呈現邏輯在shouldComponentUpdate()實現。如果正在使用可變對象,並且該邏輯不能在shouldComponentUpdate()中實現,則僅當新狀態與先前狀態不同時調用setState()才能避免不必要的重新呈現。

你可以從官方文檔 https://facebook.github.io/react/docs/component-api.html

0

所以基本上你的問題是從setState引述別人獲得更多的信息。但是你可以很容易地console.log也做:

this.setState({pageNum: this.state.pageNum+1},() => { 
    console.log(this.state.pageNum); 
}) 

setState定義:

void setState(
    function|object nextState, 
    [function callback] 
)