快捷導(dǎo)航

React在定時(shí)器中無(wú)法獲取狀態(tài)最新值的問(wèn)題

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

這篇文章主要介紹了React在定時(shí)器中無(wú)法獲取狀態(tài)最新值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

在定時(shí)器中無(wú)法獲取狀態(tài)最新值

在做輪播圖組件時(shí)發(fā)現(xiàn)了一個(gè)問(wèn)題，在setInterval中無(wú)法通過(guò)狀態(tài)直接獲取最新值，如：

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

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

問(wèn)題原因

定時(shí)器一直都沒(méi)有被清除，因此獲取的狀態(tài)始終是定時(shí)器被創(chuàng)建時(shí)候的狀態(tài)。

問(wèn)題解決

從代碼和圖片可以看到，定時(shí)器中打印的狀態(tài)永遠(yuǎn)都是初始值，后面所改變的值雖然更新了，頁(yè)面也發(fā)生了變化，但是我們從log中無(wú)法獲取到實(shí)時(shí)狀態(tài)。

解決辦法很簡(jiǎn)單：

第一種，就是在setState中獲取上一次狀態(tài)，因?yàn)閡seState hooks提供了記錄上一次狀態(tài)的緩存回調(diào)，可以在這個(gè)回調(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和定時(shí)器產(chǎn)生的bug

問(wèn)題1

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

例：

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

產(chǎn)生原因：因?yàn)槊看蝧etValue后會(huì)重新創(chuàng)建函數(shù),由于并沒(méi)有及時(shí)清理掉setInterval，setInterval執(zhí)行的上下文環(huán)境都是第一次創(chuàng)建本函數(shù)式組件的上下文(所以value值不會(huì)超過(guò)1)

解決方案

方案一：

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

方案二：

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

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

您可能感興趣的文章: