解決setState的異步問題

由于react中把setState設(shè)置為異步操作函數(shù),這有時候會給我們帶來以一些問題,下面介紹一下怎么解決這個問題。

1. 在setState完成的回調(diào)里執(zhí)行需要的操作

setState函數(shù)的第二個參數(shù)允許傳入回調(diào)函數(shù),在狀態(tài)更新完畢后進(jìn)行調(diào)用,譬如:

this.setState({

? ? ? load: !this.state.load,

? ? ? count: this.state.count + 1

? ? }, () => {

? ? ? ? ? console.log(this.state.count);

? ? ? ? ? console.log('加載完成')

? ? });

2. 傳入狀態(tài)計算函數(shù)

除了使用回調(diào)韓式的方式監(jiān)聽狀態(tài)更新結(jié)果之外,react還允許我們傳入某個狀態(tài)計算函數(shù)而不是對象作為第一個參數(shù)。狀態(tài)計算函數(shù)能夠為我們提供可依賴的組件的state與props值,即會自動的將我們的狀態(tài)更新操作添加到隊列中并等待前面的更新完畢后傳入更新的狀態(tài)值:

this.setState(function(prevState, props){

? ? ? ? ? ?return {需要改變的state的名稱: 改變之后的state的值}

});

參考鏈接:https://zhuanlan.zhihu.com/p/24781259

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 做React需要會什么? react的功能其實很單一,主要負(fù)責(zé)渲染的功能,現(xiàn)有的框架,比如angular是一個大而...
    蒼都閱讀 14,967評論 1 139
  • 最近看了一本關(guān)于學(xué)習(xí)方法論的書,強(qiáng)調(diào)了記筆記和堅持的重要性。這幾天也剛好在學(xué)習(xí)React,所以我打算每天堅持一篇R...
    gaoer1938閱讀 1,818評論 0 5
  • 以下內(nèi)容是我在學(xué)習(xí)和研究React時,對React的特性、重點和注意事項的提取、精練和總結(jié),可以做為React特性...
    科研者閱讀 8,423評論 2 21
  • “那時日子還年輕,我扎個懶散的馬尾,在你面前蹦蹦跳跳。世界干凈,有喜歡的你和幼稚的詩,仿佛生來被愛?!?一 夏季的...
    水檻閱讀 232評論 5 4
  • 在昨晚的“中國杯”中,國足0-2輸給了冰島隊,本場比賽里皮主要目的是考驗新人為主,輸?shù)舯荣愐矝]有太多好埋怨的,而...
    奮斗星人_小帆閱讀 274評論 0 0

友情鏈接更多精彩內(nèi)容