React之使用useState異步刷新的問題

更新時間：2024年03月12日 15:20:11 作者：一步一步HH

這篇文章主要介紹了React之使用useState異步刷新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

react使用useState異步刷新

問題

React開發(fā)中經(jīng)常會遇到，組件渲染時都是上一次的數(shù)據(jù)，每次修改state數(shù)據(jù)，都不會立即在頁面上顯示更新。

原因

這是由于React里事件分為合成事件和原生事件，合成事件和鉤子函數(shù)都是異步的，原生事件是同步的。

由于useState是異步事件，所以會出現(xiàn)異步更新問題。

在調(diào)用setData()的過程中，不要試圖立即獲取數(shù)據(jù)狀態(tài)的變化。

解決方案

使用useRef存儲數(shù)據(jù)，useEffect監(jiān)聽數(shù)據(jù)變化，并進(jìn)行更新。

定義：

const [initEditClassFormData, setInitEditClassFormData] = useState();
 
const initFormRef = useRef();
 
useEffect(() => {
    initFormRef.current = initEditClassFormData;
  }, [initEditClassFormData]);

調(diào)用：

使用時，不再用initEditClassFormData，使用initFormRef.current

initFormRef.current

react的useState異步數(shù)據(jù)不更新

在異步獲取的數(shù)據(jù)時，使用useState，set值時不會更新，導(dǎo)致報錯

const [shopInformation, setShopInformation] = useState([]); //商鋪信息
useEffect(() => {
    getShopInformation();
  }, [projectCode]);
useEffect(() => {
    // 這個useEffect很關(guān)鍵，第一次賦值但是獲取不到，所以要再賦值一次
    if (shopInformation) {
      setShopInformation(shopInformation);
    }
  }, [shopInformation]);
const getShopInformation = async () => {
    let data = await api.selectByPageRecordShop({
      pageSize,
      pageNumber,
      projectCode: projectCode,
    });
    if (data.code == '1') {
     // 第一次雖然在這里賦值了，但是外部想拿到 shopInformation這個變量還是空的
      setShopInformation(data.data.rows[0]);
    }
  };

聽說用useRef也可以？還不太清楚?。?！

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

React進(jìn)行路由變化監(jiān)聽的解決方案
在現(xiàn)代單頁應(yīng)用（SPA）中,路由管理是至關(guān)重要的一部分,它不僅決定了用戶如何在頁面間切換,還直接影響到整個應(yīng)用的性能和用戶體驗(yàn),這些看似不起眼的問題,往往會導(dǎo)致功能錯亂和性能下降,本篇文章將深入探討在 React 中如何高效監(jiān)聽路由變化,需要的朋友可以參考下
2025-01-01
React?split實(shí)現(xiàn)分割字符串的使用示例
當(dāng)我們需要將一個字符串按照指定的分隔符進(jìn)行分割成數(shù)組時,我們可以在組件的生命周期方法中使用split方法來實(shí)現(xiàn)這個功能,本文就來介紹一下,感興趣的可以了解下
2023-10-10
React使用PropTypes實(shí)現(xiàn)類型檢查功能
這篇文章主要介紹了React高級指引中使用PropTypes實(shí)現(xiàn)類型檢查功能的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-02-02
基于react后端渲染模板引擎noox發(fā)布使用
本篇文章主要介紹了基于react后端渲染模板引擎noox發(fā)布使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
淺談React 屬性和狀態(tài)的一些總結(jié)
下面小編就為大家?guī)硪黄獪\談React 屬性和狀態(tài)的一些總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
詳解React中如何拆分組件
這篇文章主要為大家詳細(xì)介紹了React中拆分組件的相關(guān)知識,文中的示例代碼講解詳細(xì),對我們掌握React有一定的幫助,需要的小伙伴可以參考一下
2023-12-12
React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
React學(xué)習(xí)筆記之事件處理（二）
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
React-RouterV6+AntdV4實(shí)現(xiàn)Menu菜單路由跳轉(zhuǎn)的方法
這篇文章主要介紹了React-RouterV6+AntdV4實(shí)現(xiàn)Menu菜單路由跳轉(zhuǎn),主要有兩種跳轉(zhuǎn)方式一種是編程式跳轉(zhuǎn)另一種是NavLink鏈接式跳轉(zhuǎn)，每種方式通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
axios請求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了axios請求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03