React之使用useState異步刷新的問(wèn)題
react使用useState異步刷新
問(wèn)題
React開(kāi)發(fā)中經(jīng)常會(huì)遇到，組件渲染時(shí)都是上一次的數(shù)據(jù)，每次修改state數(shù)據(jù)，都不會(huì)立即在頁(yè)面上顯示更新。
原因
這是由于React里事件分為合成事件和原生事件，合成事件和鉤子函數(shù)都是異步的，原生事件是同步的。
由于useState是異步事件，所以會(huì)出現(xiàn)異步更新問(wèn)題。
在調(diào)用setData()的過(guò)程中，不要試圖立即獲取數(shù)據(jù)狀態(tài)的變化。
解決方案
使用useRef存儲(chǔ)數(shù)據(jù)，useEffect監(jiān)聽(tīng)數(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]);
}
};聽(tīng)說(shuō)用useRef也可以？還不太清楚?。?！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React進(jìn)行路由變化監(jiān)聽(tīng)的解決方案
在現(xiàn)代單頁(yè)應(yīng)用（SPA）中,路由管理是至關(guān)重要的一部分,它不僅決定了用戶如何在頁(yè)面間切換,還直接影響到整個(gè)應(yīng)用的性能和用戶體驗(yàn),這些看似不起眼的問(wèn)題,往往會(huì)導(dǎo)致功能錯(cuò)亂和性能下降,本篇文章將深入探討在 React 中如何高效監(jiān)聽(tīng)路由變化,需要的朋友可以參考下2025-01-01
React?split實(shí)現(xiàn)分割字符串的使用示例
當(dāng)我們需要將一個(gè)字符串按照指定的分隔符進(jìn)行分割成數(shù)組時(shí),我們可以在組件的生命周期方法中使用split方法來(lái)實(shí)現(xiàn)這個(gè)功能,本文就來(lái)介紹一下,感興趣的可以了解下2023-10-10
React使用PropTypes實(shí)現(xiàn)類型檢查功能
這篇文章主要介紹了React高級(jí)指引中使用PropTypes實(shí)現(xiàn)類型檢查功能的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
本篇文章主要介紹了基于react后端渲染模板引擎noox發(fā)布使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
下面小編就為大家?guī)?lái)一篇淺談React 屬性和狀態(tài)的一些總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了React中拆分組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們掌握React有一定的幫助,需要的小伙伴可以參考一下2023-12-12
React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(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)，每種方式通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
axios請(qǐng)求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了axios請(qǐng)求響應(yīng)數(shù)據(jù)加解密封裝實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03