React 的 useState 是怎么回事？

Question

这是 React 中 onClick 事件处理程序的一段代码

代码：

function handleChange(event) {
console.log('before 1st update')

setCount(prevCount => {
  console.log('inside 1st update')
  return prevCount + 1
})

console.log('After 1st update')

setCount(prevCount => {
  console.log('inside 2nd update')
  return prevCount + 1
})

console.log('After 2nd update')}

输出：

第一次更新前
在第一次更新中
第一次更新后
第二次更新后
在第二次更新中

预期输出：

第一次更新前
在第一次更新中
第一次更新后
在第二次更新中
第二次更新后

有人能解释一下吗？此外，该示例提供了足够的证据表明更新程序功能是同步的并且更新是异步的（在浏览器事件的情况下）。

Answer 1

setState 在 React 中就像一个异步函数。
所以在设置后立即放置 console.log(state)，很可能会显示以前的值，因为它实际上并没有完成更新状态，直到日志命令运行s.
我们可以根据状态的变化采取行动，使用 React 的 built-in useEffect 挂钩，该挂钩将相关状态作为依赖项来检查值。

示例：

useEffect(() => {
   console.log(state);
}, [state]);

基本上，示例中的回调函数将在每次状态更改时运行。

在您的情况下，它应该如下所示：

function handleChange(event) {
   console.log('before 1st update')

   setCount(prevCount => {
      console.log('inside 1st update')
      return prevCount + 1
   })

   setCount(prevCount => {
      console.log('inside 2nd update')
      return prevCount + 1
   })
}

useEffect(() => {
   console.log('count has been updated:', count)
}, [count])

其余日志有效。

React 的 useState 是怎么回事？

What's going on with React's useState?

javascript

reactjs

react-hooks

use-state