React之使用useState异步刷新的问题
更新时间：2024年03月12日 15:20:11 作者：一步一步HH
这篇文章主要介绍了React之使用useState异步刷新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react使用useState异步刷新
问题
React开发中经常会遇到，组件渲染时都是上一次的数据，每次修改state数据，都不会立即在页面上显示更新。
原因
这是由于React里事件分为合成事件和原生事件，合成事件和钩子函数都是异步的，原生事件是同步的。
由于useState是异步事件，所以会出现异步更新问题。
在调用setData()的过程中，不要试图立即获取数据状态的变化。
解决方案
使用useRef存储数据，useEffect监听数据变化，并进行更新。
定义：
const [initEditClassFormData, setInitEditClassFormData] = useState();
const initFormRef = useRef();
useEffect(() => {
initFormRef.current = initEditClassFormData;
}, [initEditClassFormData]);调用：
使用时，不再用initEditClassFormData，使用initFormRef.current
initFormRef.current
react的useState异步数据不更新
在异步获取的数据时，使用useState，set值时不会更新，导致报错
const [shopInformation, setShopInformation] = useState([]); //商铺信息
useEffect(() => {
getShopInformation();
}, [projectCode]);
useEffect(() => {
// 这个useEffect很关键，第一次赋值但是获取不到，所以要再赋值一次
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也可以？还不太清楚！！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
随着业务的发展，每一个 React Native 应用的代码数量都在不断增加。作为一个前端想到的方案自然就是动态导入（Dynamic import）了，本文介绍了React Native中实现动态导入的示例代码，需要的可以参考一下2022-06-06
在开发项目的时候,从服务端获取到数据列表后,展示给用户看,需要实现数据自动滚动效果,怎么实现呢,下面小编给大家分享react实现列表滚动组件功能实现代码,感兴趣的朋友一起看看吧2023-09-09
这篇文章主要为大家介绍了ahooks控制时机的hook实现方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了react native图片解析流程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
React是一个用于渲染用户界面的JavaScript工具库,UI是由类似按钮、文本框以及图片之类的小零件构成的,这篇文章主要介绍了React+JWT登录界面实现的完整流程,需要的朋友可以参考下2026-04-04
这篇文章主要介绍了React注册倒计时功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
react-router-dom v6版本跳转路径的实现方法
这篇文章主要介绍了react-router-dom v6版本跳转路径的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了使用React Hooks模拟生命周期,本文举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期，需要的朋友可以参考下2023-02-02
React Native 自定义下拉刷新上拉加载的列表的示例
本篇文章主要介绍了React Native 自定义下拉刷新上拉加载的列表的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了关于react 父子组件的执行顺序，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论