React在定時器中無法獲取狀態(tài)最新值的問題

更新時間：2022年08月08日 14:46:45 作者：前端常春藤

這篇文章主要介紹了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)永遠(yuǎn)都是初始值，后面所改變的值雖然更新了，頁面也發(fā)生了變化，但是我們從log中無法獲取到實(shí)時狀態(tài)。

解決辦法很簡單：

第一種，就是在setState中獲取上一次狀態(tài)，因?yàn)閡seState 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)生原因：因?yàn)槊看蝧etValue后會重新創(chuàng)建函數(shù),由于并沒有及時清理掉setInterval，setInterval執(zhí)行的上下文環(huán)境都是第一次創(chuàng)建本函數(shù)式組件的上下文(所以value值不會超過1)

解決方案

方案一：

setInterval(() => {
? ? ?console.log(value);
? ? ?setValue(v=>v+1); ? ? ?函數(shù)式的setValue會保存上一次的值,所以會取得最新值,該方式指定state該如何改變而不用引用當(dāng)前state
? ?},1000)

方案二：

useEffect(() => {
? ? ?const id = setInterval(() => {
? ? ? ? ?valf.current++; ? ?不一定是ref操作,正常set操作即可
? ? ? ?}, 1000);
? ? ? ?return () => clearInterval(id);
? ?}, []);

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: