React之使用useState异步刷新的问题
作者：一步一步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也可以？还不太清楚！！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。