React之使用useState异步刷新的问题
更新时间：2024年03月12日 15:20:11 作者：一步一步HH
这篇文章主要介绍了React之使用useState异步刷新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
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 服务器组件受到了广泛的关注和热捧,这是因为 React 服务器组件允许开发人员将与组件相关的任务外包给服务器,在本文中,我们将讨论什么是 React 服务器组件,以及如何将它们集成到构建应用程序中,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了使用React组件编写温度显示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
React脚手架config-overrides.js文件的配置方式
这篇文章主要介绍了React脚手架config-overrides.js文件的配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在React中,受控组件指的是表单元素的value值受React组件的state或props控制的组件,而非受控组件则是表单元素的value值由DOM自身负责管理的组件,本文将给大家详细介绍React受控组件与非受控组件,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了react优雅处理多条件鼠标拖拽位移，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
React组件性能优化可以减少渲染真实DOM的频率,以及减少VD比对的频率,本文为大家整理了一些有效的React组件优化方法,需要的小伙伴可以参考下2023-12-12
这篇文章主要介绍了react vue背景挂载机器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
react koa rematch 如何打造一套服务端渲染架子
这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
React的useEffect钩子是React函数组件中处理副作用,本文将通过一个简单的例子解释如何用代码实现useEffect的基本原理,感兴趣的小伙伴可以了解下2023-12-12
React的context就是一个全局变量，可以从根组件跨级别在React的组件中传递。React context的API有两个版本，React16.x之前的是老版本的context，之后的是新版本的context2022-11-11
最新评论