log(i)打印预览结果

Question

使用下面的代码-在表单字段中使用handleChange方法：

1. 启动i = 0
2. 第一次更改
3. i应更新为i+1
4. 并且console.log(i)=应该是1，但是得到0

• 我试着研究生命周期，读了很多帖子，但不明白如何解决它(试图简化问题(

感谢

const [i, setI] = useState(0)
const handleChange = input => event => {
setI(i + 1)
console.log(i)
}
<ChildFormComponent handleChange={handleChange}/>

Answer 1

setI函数是异步的。我不是同步更新的，而是异步更新的。如果要记录i的新值，请使用useEffect挂钩并添加i作为其依赖项。

React.useEffect(() => {
console.log(i)
}, [i])

Answer 2

您确定您的handleChange声明吗？它应该把功能还给你吗？

const handleChange = input => event => {
setI(i + 1)
console.log(i)
}

你能试试类似的东西代替吗

const handleChange = event => {
setI(i => i + 1)
}

不要担心console.log(i)，因为状态更新是异步的。

您将在UI中获得其他人在评论中建议的更新数据。