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