react hooks 问题

Question

useEffect( () => {

const getStatus = async () => {

let res = await queryMedical({id: null})

console.log(1, 'formData', formData)

setFormData(res)

console.log(2, 'formData', formData)

}

getStatus()

}, [])

console.log(0, 'formData', formData)

setFormData 之后为什么formData又成为空对象了?
这个逻辑是错误的吗?
应该怎样做?

求大神讲解一下

Answer 1

capture value 2的formdata和1是一个

Answer 2

let [formData,setFormData]=useState(null);

setFormData非同步方法，也就是方法调用后不会立即同步更新formData对象，React会批量处理状态的更新操作。
如果现在set时获取先前值，可传入一个函数给set方法

setFormData((current)=>{
    console.log('new:',res)
    return res;
});

Answer 3

代码要给全嗯, useEffect的依赖是没有加上formData, 自然里面打出来的formData都是空的, 官方文档都看看嗯

Answer 4

setFormData之后实际上formData已经变成你想要的那个对象了，state变更引发重新render，所以第三次console.log(0, 'formData', formData)的时候能打出{id:170, ...}；

但是state更新是异步的，你在setFormData之后立刻console.log(2, 'formData', formData)，此时formData还没有更新完成，也就log不出{id:170, ...}；

你可以试试把console.log(2, 'formData', formData)包在setTimeout里，

setTimeout(()=>{console.log(2, 'formData', formData)}, 500)

这样应该就能看到你想要的结果了。

Answer 5

hook模式事件函数是独立运行的，也就是formData在effetch中访问的是固定值，其他就是闭包执行的原理。

你可以理解为：
1.组件首次执行触发第一次effetch执行，effetch中的formData等于闭包值{}。setFormData会处罚组件二次执行。

2.组件二次执行产生闭包作用，但是effetch监听数组为空，所以不会触发effetch函数的二次执行。

3.所以控制台输出的formData除了effetch函数外的console皆为上一次的formData输出

注意：在class模式开发下是不会出现此类情况的