例如下面的代碼，兩次打印出的結果是相同的：

componentDidMount() {

this.setState({ index: this.state.index + 1 }, () => {

console.log(this.state.index);

})

this.setState({ index: this.state.index + 1 }, () => {

console.log(this.state.index);

})

}

原因就是 React會批處理機制中存儲的多個 setState進行合并，來看下 React源碼中的 _assign函數，類似于 Object的 assign：

_assign(nextState,typeof partial ==='function'?partial.call(inst,nextState,props,context):partial);

如果傳入的是對象，很明顯會被合并成一次，所以上面的代碼兩次打印的結果是相同的：

Object.assign(

nextState,

{index: state.index+ 1},

{index: state.index+ 1}

)

注意， assign函數中對函數做了特殊處理，處理第一個參數傳入的是函數，函數的參數 preState是前一次合并后的結果，所以計算結果是準確的：

componentDidMount() {

this.setState((state, props) => ({

index: state.index + 1

}), () => {

console.log(this.state.index);

})

this.setState((state, props) => ({

index: state.index + 1

}), () => {

console.log(this.state.index);

})

}

所以上面的代碼兩次打印的結果是不同的。

最佳實踐

React會對多次連續的 setState進行合并，如果你想立即使用上次 setState后的結果進行下一次 setState，可以讓 setState 接收一個函數而不是一個對象。這個函數用上一個 state 作為第一個參數，將此次更新被應用時的 props 做為第二個參數。

總結

以上是生活随笔為你收集整理的jlabel 不能连续两次set_为什么有时连续多次setState只有一次生效？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。