关于react hook useState连续更新对象的问题
作者：Bearbearssss
这篇文章主要介绍了关于react hook useState连续更新对象的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react hook useState连续更新对象
react hook 的useState更新是异步的，所以在连续更新出发useState时会出现问题
eg：
import React, {useState} from 'react';
export default () => {
const [obj, setObj] = useState({
a: 1,
b: 2
})
const changeObj = () => {
// 连续触发2次setObj（实际项目不会这样写，我这样写只是为了模拟连续触发2次setObj带来的问题）
setObj({...obj, a: 2})
setObj({...obj, b: 3})
}
return (<div onClick={changeObj}>
// 此时页面上显示的值为 {a: 1, b: 3}, 出现该问题的原因是因为useState是异步的，在第二次触发setObj时，obj还是没更新a之前的obj，所以出现该结果
{JSON.stringify(obj)}
</div>)
}解决此情况的方式
就是在第二次触发时使用
setObj((data) => ({...data, b: 3})) 这样的方式
import React, {useState} from 'react';
export default () => {
const [obj, setObj] = useState({
a: 1,
b: 2
})
const changeObj = () => {
// 连续触发2次setObj（实际项目不会这样写，为了模拟情况）
setObj({...obj, a: 2})
// data标识存储的是更新a后的对象，用这样的方式可以解决连续触发2次带来的问题
setObj((data) => ({...data, b: 3}))
}
return (<div onClick={changeObj}>
// 此时页面上显示的值为 {a: 2, b: 3}
{JSON.stringify(obj)}
</div>)
}react hook使用useState()更新状态(state)异步导致不能及时读取更新之后的数据
场景描述
我在更新一个状态之后要立马用这个状态去更新其他状态
我的源代码
const onChange = (nextTargetKeys: any) => {
//更新状态
setTargetKeys(nextTargetKeys);
let v = 0;
let n = 0;
let g = 0;
//立马使用
targetKeys.forEach((item: number, index) => {
v += mockData[item].itemVolume;
n += mockData[item].itemNw;
g += mockData[item].itemGw;
});
setTopData({ v: Number((v/1000000).toFixed(4)), n: n, g: g });
};
如果是vue，这里是没有问题的 ，但是这是react~这里的数据还没更新，取到的还是旧数据
这里加个setTimeout延迟执行就是新的数据。这是为什么了？
原因：
vue是同步更新状态，异步视图，当状态变化是阻塞更新完成之后执行后继逻辑，
react是异步更新状态，setState 是异步方法，所以不会阻塞！
处理办法
添加一个 副作用（useEffect()）
useEffect(()=>{
let v = 0;
let n = 0;
let g = 0;
targetKeys.forEach((item: number, index) => {
v += mockData[item].itemVolume;
n += mockData[item].itemNw;
g += mockData[item].itemGw;
console.log(v)
});
setTopData({ v: Number((v/1000000).toFixed(4)), n: n, g: g });
},[targetKeys])
顺便发表感受，还是vue的状态更新直接、简便！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。