react hooks 问题

This topic created in 2068 days ago, the information mentioned may be changed or developed.

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)

------------------------------------------
0 "formData" {}
0 "formData" {}
1 "formData" {}

0 "formData" {id: 170, buyerId: 10000000424, tenantId: 1, createdBy: "10000000424", createdAt: null,…}

2 "formData" {}

----------------------
第三次 0 时 formData 已经有值了.为什么还会走一次 console.log(2) 呢?

formdata

log

console

formdata'

5 replies 2020-10-12 11:09:33 +08:00

azcvcza

Sep 28, 2020

我个人的看法是，hooks 是提供给虚拟机执行的闭包，而函数式组件就是给虚拟机多次执行的含有不同参数的函数，当打印了 1 之后，setFormData 触发重新渲染，再运行含有新参数的函数，然后发现 effect 中的函数已经执行过了，直接跳到 0，最后打印闭包中剩下没执行的 2 ？

onfuns

Sep 28, 2020

useState 里的 callback 调用其实是异步的，所以不能在调用 callback 后立马获取 console.log(2, 'formData', formData)，这种写法是错误的。

JimmyChange

Sep 28, 2020

console.log(1, 'formData', formData)
setFormData(res)
console.log(2, 'formData', formData)

调用 setFormData 会再次触发 render，输出 0 formData，但是 setFormData 结束后，后边的 console.log 还是会执行，输出 2 "formData"

baxtergu

Sep 29, 2020

按照你的写法：
1 、useEffect 中的代码只会在组件 mount 以后执行一次，不管以后组件状态或者 props 怎么变 useEffect 中的代码只会执行 1 次。（也就是为什么 1 和 2 只会输出一次，而 0 会输出多次）
2 、useState 生成的 setState 的执行是**创建一个新的 state 为下一次 render 使用**。但是 useEffect 这次函数闭包里的 formData 是上一次的 state 也就是{}，这一点跟类组件的 this.state 是完全不一样的。类组件的 this.state 保存的是状态对象的一个引用，但是用 useState 生成的 state 是通过闭包保存了执行 useEffect 时 state 的在函数执行上下文中的，也就是旧的 state 引用。每次重新 render 以后都会生成一个新的 state，而不是改变旧 state 的引用里的值。

cw2k13as

Oct 12, 2020

useEffect( () => {
}, [])只会执行一次，hook 保留的都是旧值，新建一个 useEffect( () => {
console.log( 'formData', formData)
}, [formData])才是获取新的值