React在定時器中無法獲取狀態(tài)最新值的問題
在定時器中無法獲取狀態(tài)最新值
在做輪播圖組件時發(fā)現(xiàn)了一個問題,在setInterval中無法通過狀態(tài)直接獲取最新值,如:
const [rightTransform, setRightTransform] = useState(pictureSize); const autoPlay = () => { //普通輪播自動播放 timer.current = setInterval(() => { let oldState = rightTransform; console.log('老狀態(tài)', oldState) //始終只會打印初始的pictureSize setRightTransform(o => { const newState = JSON.parse(JSON.stringify(o)); return newState >= (renderImgList.length) * pictureSize ? 0 : newState + pictureSize }) }, 1000); }
問題原因
定時器一直都沒有被清除,因此獲取的狀態(tài)始終是定時器被創(chuàng)建時候的狀態(tài)。
問題解決
從代碼和圖片可以看到,定時器中打印的狀態(tài)永遠都是初始值,后面所改變的值雖然更新了,頁面也發(fā)生了變化,但是我們從log中無法獲取到實時狀態(tài)。
解決辦法很簡單:
第一種,就是在setState中獲取上一次狀態(tài),因為useState hooks提供了記錄上一次狀態(tài)的緩存回調(diào),可以在這個回調(diào)中獲取上一輪狀態(tài)
如圖:
timer.current = setInterval(() => { let oldState = rightTransform; setRightTransform(o => { console.log('在setState中的老狀態(tài)', o) const newState = JSON.parse(JSON.stringify(o)); return newState >= (renderImgList.length) * pictureSize ? 0 : newState + pictureSize }) console.log('直接打印老狀態(tài)', oldState) }
ReactHook hooks和定時器產(chǎn)生的bug
問題1
使用定時器改變state,state的值并不是最新值
例:
?const _onClick = function () ?{ ? ?setInterval(() => { ? ? ?console.log(value); ? ? ?setValue(value + 1); ? ?},1000) ?}
產(chǎn)生原因:因為每次setValue后會重新創(chuàng)建函數(shù),由于并沒有及時清理掉setInterval,setInterval執(zhí)行的上下文環(huán)境都是第一次創(chuàng)建本函數(shù)式組件的上下文(所以value值不會超過1)
解決方案
方案一:
setInterval(() => { ? ? ?console.log(value); ? ? ?setValue(v=>v+1); ? ? ?函數(shù)式的setValue會保存上一次的值,所以會取得最新值,該方式指定state該如何改變而不用引用當前state ? ?},1000)
方案二:
useEffect(() => { ? ? ?const id = setInterval(() => { ? ? ? ? ?valf.current++; ? ?不一定是ref操作,正常set操作即可 ? ? ? ?}, 1000); ? ? ? ?return () => clearInterval(id); ? ?}, []);
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
react嵌套路由實現(xiàn)TabBar的實現(xiàn)
本文主要介紹了react嵌套路由實現(xiàn)TabBar的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08react koa rematch 如何打造一套服務(wù)端渲染架子
這篇文章主要介紹了react koa rematch 如何打造一套服務(wù)端渲染架子,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06React實現(xiàn)生成和導(dǎo)出Word文檔的方法詳解
React是一個流行的JavaScript庫,用于構(gòu)建現(xiàn)代前端應(yīng)用程序,本文將深入探討如何在React中生成和導(dǎo)出Word文檔,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09React入門教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架,所以產(chǎn)生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關(guān)于React入門教程之Hello World以及環(huán)境搭建的相關(guān)資料,需要的朋友可以參考借鑒。2017-07-07react組件中的constructor和super知識點整理
這篇文章主要介紹了react組件中的constructor和super知識點整理,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-08-08