React之使用useState異步刷新的問題
react使用useState異步刷新
問題
React開發(fā)中經(jīng)常會(huì)遇到，組件渲染時(shí)都是上一次的數(shù)據(jù)，每次修改state數(shù)據(jù)，都不會(huì)立即在頁面上顯示更新。
原因
這是由于React里事件分為合成事件和原生事件，合成事件和鉤子函數(shù)都是異步的，原生事件是同步的。
由于useState是異步事件，所以會(huì)出現(xiàn)異步更新問題。
在調(diào)用setData()的過程中，不要試圖立即獲取數(shù)據(jù)狀態(tài)的變化。
解決方案
使用useRef存儲(chǔ)數(shù)據(jù)，useEffect監(jiān)聽數(shù)據(jù)變化，并進(jìn)行更新。
定義：
const [initEditClassFormData, setInitEditClassFormData] = useState();
const initFormRef = useRef();
useEffect(() => {
initFormRef.current = initEditClassFormData;
}, [initEditClassFormData]);調(diào)用：
使用時(shí)，不再用initEditClassFormData，使用initFormRef.current
initFormRef.current
react的useState異步數(shù)據(jù)不更新
在異步獲取的數(shù)據(jù)時(shí)，使用useState，set值時(shí)不會(huì)更新，導(dǎo)致報(bào)錯(cuò)
const [shopInformation, setShopInformation] = useState([]); //商鋪信息
useEffect(() => {
getShopInformation();
}, [projectCode]);
useEffect(() => {
// 這個(gè)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這個(gè)變量還是空的
setShopInformation(data.data.rows[0]);
}
};聽說用useRef也可以？還不太清楚?。?！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼
隨著業(yè)務(wù)的發(fā)展，每一個(gè) React Native 應(yīng)用的代碼數(shù)量都在不斷增加。作為一個(gè)前端想到的方案自然就是動(dòng)態(tài)導(dǎo)入（Dynamic import）了，本文介紹了React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼，需要的可以參考一下2022-06-06
react實(shí)現(xiàn)列表滾動(dòng)組件功能
在開發(fā)項(xiàng)目的時(shí)候,從服務(wù)端獲取到數(shù)據(jù)列表后,展示給用戶看,需要實(shí)現(xiàn)數(shù)據(jù)自動(dòng)滾動(dòng)效果,怎么實(shí)現(xiàn)呢,下面小編給大家分享react實(shí)現(xiàn)列表滾動(dòng)組件功能實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09
ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法
這篇文章主要為大家介紹了ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了react native圖片解析流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
React+JWT登錄界面實(shí)現(xiàn)的完整流程
React是一個(gè)用于渲染用戶界面的JavaScript工具庫,UI是由類似按鈕、文本框以及圖片之類的小零件構(gòu)成的,這篇文章主要介紹了React+JWT登錄界面實(shí)現(xiàn)的完整流程,需要的朋友可以參考下2026-04-04
React注冊(cè)倒計(jì)時(shí)功能的實(shí)現(xiàn)
這篇文章主要介紹了React注冊(cè)倒計(jì)時(shí)功能的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法
這篇文章主要介紹了react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用React?Hooks模擬生命周期的實(shí)現(xiàn)方法
這篇文章主要介紹了使用React?Hooks模擬生命周期,本文舉例說明如何使用 hooks 來模擬比較常見的 class 組件生命周期，需要的朋友可以參考下2023-02-02
React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了關(guān)于react 父子組件的執(zhí)行順序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09