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

學無先后，達者為師

網站首頁 編程語言 正文

React在定時器中無法獲取狀態最新值的問題_React

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

在定時器中無法獲取狀態最新值

在做輪播圖組件時發現了一個問題，在setInterval中無法通過狀態直接獲取最新值，如：

const [rightTransform, setRightTransform] = useState(pictureSize);

const autoPlay = () => {        //普通輪播自動播放
    timer.current = setInterval(() => {
      let oldState = rightTransform;
      console.log('老狀態', oldState)			//始終只會打印初始的pictureSize
      setRightTransform(o => {
        const newState = JSON.parse(JSON.stringify(o));
        return newState >= (renderImgList.length) * pictureSize ? 0 : newState + pictureSize
      })
	}, 1000);
}

問題原因

定時器一直都沒有被清除，因此獲取的狀態始終是定時器被創建時候的狀態。

問題解決

從代碼和圖片可以看到，定時器中打印的狀態永遠都是初始值，后面所改變的值雖然更新了，頁面也發生了變化，但是我們從log中無法獲取到實時狀態。

解決辦法很簡單：

第一種，就是在setState中獲取上一次狀態，因為useState hooks提供了記錄上一次狀態的緩存回調，可以在這個回調中獲取上一輪狀態

如圖：

timer.current = setInterval(() => {
      let oldState = rightTransform;
      setRightTransform(o => {
        console.log('在setState中的老狀態', o)
        const newState = JSON.parse(JSON.stringify(o));
        return newState >= (renderImgList.length) * pictureSize ? 0 : newState + pictureSize
      })
      console.log('直接打印老狀態', oldState)
}

ReactHook hooks和定時器產生的bug

問題1

使用定時器改變state,state的值并不是最新值

例：

?const _onClick = function ()
?{
? ?setInterval(() => {
? ? ?console.log(value);
? ? ?setValue(value + 1);
? ?},1000)
?}

產生原因：因為每次setValue后會重新創建函數,由于并沒有及時清理掉setInterval，setInterval執行的上下文環境都是第一次創建本函數式組件的上下文(所以value值不會超過1)

解決方案?? ??? ?

方案一：

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

?? ?

方案二：

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

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

欄目分類
最近更新