日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達者為師

網(wǎng)站首頁 編程語言 正文

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

作者：前端常春藤 ? 更新時間： 2022-10-03 編程語言

在定時器中無法獲取狀態(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該如何改變而不用引用當(dāng)前state
? ?},1000)

?? ?

方案二：

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

原文鏈接：https://blog.csdn.net/m0_46995864/article/details/125099936

欄目分類
最近更新