React-異步+usecallback+setState

? ? react出了hook之后,也是在嘗試去使用,但在使用的過程中發(fā)現(xiàn),hook在處理異步操作的時候,有些問題,而改變狀態(tài)是異步的,發(fā)請求也是異步的,setInterval和setTimeout也是異步的,免不了在hook中踩到異步的坑,下變我們來看一下這個坑里發(fā)生了什么,應(yīng)該怎么填。

? ? 類似的場景呢,是在做一次批量上傳功能的時候碰到的,批量上傳,說到底還是一個個上傳,每次文件上傳(異步)結(jié)束之后,會告訴后端(異步),傳好了,然后記錄一下,但這邊還沒等告訴完后端,那邊又上傳成功一個。而且是個頻繁的操作過程。我們用setTimeout來模擬一下。

代碼

我們用uploaded模仿上傳,10ms后,文件上傳成功,改變count并通過tellBack告訴后臺。

我們來看下輸出結(jié)果

點一下:

點一下結(jié)果

結(jié)果顯示了1之后,馬上變成了-1.

點兩下

點兩下結(jié)果

結(jié)果顯示了0之后,馬上變成-2.

點三下:

點三下結(jié)果

結(jié)果顯示了下-1,又變成了-3.

哎~怎么回事?為什么不是停留在 0 ?你看,upload 的時候加1,tellBack的時候減1,正好是零啊。對應(yīng)看下輸出,發(fā)現(xiàn)uploaded和tellBack中傳入的值是相等的,都會基于這個值去做加減。合著第一次加1白加了,只有最后的減1生效了。如果對應(yīng)到上傳狀態(tài)true和false的話,這里始終是減1代表的狀態(tài)。這是因為執(zhí)行tellBack的時候,這個值還沒有發(fā)生變化,當(dāng)執(zhí)行tellBack的時候,tellBack會執(zhí)行一個異步,這個異步緩存的是還沒更新的count。才導(dǎo)致了只有減1生效。

稍微改一下代碼,把參數(shù)傳進(jìn)去:

傳count


結(jié)果

在看下結(jié)果,哎,完美。

?著作權(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)容

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