React console.log(i) 打印预览结果

Question

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

开始i = 0
第一次更改
i 应该更新为 i+1
和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 不是同步更新而是异步更新。如果要记录 i 的新值，请使用 useEffect 挂钩并添加 i 作为其依赖项。

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

Answer 2

您确定 handleChange 声明吗？它 return 对你有用吗？

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

你能试试类似的东西吗


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

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

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

React console.log(i) 打印预览结果

React console.log(i) print the previews result

reactjs

react-lifecycle

react-hooks

use-state