React中useEffect内setState调用后状态仍为undefined？原因及解决方法

这是因为React的状态更新是异步且批量处理的，调用setUser后并不会立刻改变当前状态变量的值。

具体到你的代码：

• 组件初始渲染时，User的初始值是undefined（因为useState()未传入初始值）。
• useEffect在组件挂载后执行，Sanity请求返回数据后调用setUser(data[0])，这个操作只会标记组件需要重新渲染，但不会同步更新当前闭包中的User变量。
• 紧接着的console.log(User)读取的还是当前useEffect闭包里的旧状态值，也就是初始的undefined。

如果想要查看更新后的User值，可以用这两种方式：

1. 在组件渲染区域打印，组件重新渲染时会输出最新状态：

function App() {
  const [User, setUser] = useState()

  // ... 其他代码

  return (
    <div>
      {console.log(User)}
    </div>
  )
}

2. 新增一个监听User变化的useEffect：

useEffect(() => {
  console.log(User); // User更新时会打印最新值
}, [User]);

内容的提问来源于stack exchange，提问作者Robert_dev