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也可以？还不太清楚！！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在现代单页应用（SPA）中,路由管理是至关重要的一部分,它不仅决定了用户如何在页面间切换,还直接影响到整个应用的性能和用户体验,这些看似不起眼的问题,往往会导致功能错乱和性能下降,本篇文章将深入探讨在 React 中如何高效监听路由变化,需要的朋友可以参考下2025-01-01
当我们需要将一个字符串按照指定的分隔符进行分割成数组时,我们可以在组件的生命周期方法中使用split方法来实现这个功能,本文就来介绍一下,感兴趣的可以了解下2023-10-10
这篇文章主要介绍了React高级指引中使用PropTypes实现类型检查功能的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
本篇文章主要介绍了基于react后端渲染模板引擎noox发布使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
下面小编就为大家带来一篇浅谈React 属性和状态的一些总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要为大家详细介绍了React中拆分组件的相关知识,文中的示例代码讲解详细,对我们掌握React有一定的帮助,需要的小伙伴可以参考一下2023-12-12
React项目配置axios和反向代理和process.env环境配置等问题
这篇文章主要介绍了React项目配置axios和反向代理和process.env环境配置等问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要跟大家介绍了关于React中事件处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习React具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
React-RouterV6+AntdV4实现Menu菜单路由跳转的方法
这篇文章主要介绍了React-RouterV6+AntdV4实现Menu菜单路由跳转,主要有两种跳转方式一种是编程式跳转另一种是NavLink链接式跳转，每种方式通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了axios请求响应数据加解密封装实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论