欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)永遠都是初始值,后面所改變的值雖然更新了,頁面也發(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)

    本文主要介紹了react嵌套路由實現(xiàn)TabBar的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • 詳解如何在React中有效地監(jiān)聽鍵盤事件

    詳解如何在React中有效地監(jiān)聽鍵盤事件

    React是一種流行的JavaScript庫,用于構(gòu)建用戶界面,它提供了一種簡單而靈活的方式來創(chuàng)建交互式的Web應(yīng)用程序,在React中,我們經(jīng)常需要監(jiān)聽用戶的鍵盤事件,以便根據(jù)用戶的輸入做出相應(yīng)的反應(yīng),本文將向您介紹如何在React中有效地監(jiān)聽鍵盤事件,并展示一些常見的應(yīng)用場景
    2023-11-11
  • 在React中強制重新渲染的4 種方式案例代碼

    在React中強制重新渲染的4 種方式案例代碼

    這篇文章主要介紹了在React中強制重新渲染的4 種方式,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-12-12
  • React組件的解耦技巧分享

    React組件的解耦技巧分享

    本文我們將和大家一起來研究如何有效地將組件解耦,讓我們的代碼變的復(fù)用性極高,文中通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2023-11-11
  • react koa rematch 如何打造一套服務(wù)端渲染架子

    react koa rematch 如何打造一套服務(wù)端渲染架子

    這篇文章主要介紹了react koa rematch 如何打造一套服務(wù)端渲染架子,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • React報錯之組件不能作為JSX組件使用的解決方法

    React報錯之組件不能作為JSX組件使用的解決方法

    本文主要介紹了React報錯之組件不能作為JSX組件使用的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • React實現(xiàn)生成和導(dǎo)出Word文檔的方法詳解

    React實現(xiàn)生成和導(dǎo)出Word文檔的方法詳解

    React是一個流行的JavaScript庫,用于構(gòu)建現(xiàn)代前端應(yīng)用程序,本文將深入探討如何在React中生成和導(dǎo)出Word文檔,感興趣的小伙伴可以學(xué)習(xí)一下
    2023-09-09
  • React入門教程之Hello World以及環(huán)境搭建詳解

    React入門教程之Hello World以及環(huán)境搭建詳解

    Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架,所以產(chǎn)生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關(guān)于React入門教程之Hello World以及環(huán)境搭建的相關(guān)資料,需要的朋友可以參考借鑒。
    2017-07-07
  • 基于React+Redux的SSR實現(xiàn)方法

    基于React+Redux的SSR實現(xiàn)方法

    這篇文章主要介紹了基于React+Redux的SSR實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • react組件中的constructor和super知識點整理

    react組件中的constructor和super知識點整理

    這篇文章主要介紹了react組件中的constructor和super知識點整理,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-08-08

最新評論