React函数组件用useState存文件buffer，set后打印为undefined原因求解

这个现象是React状态更新的固有特性导致的，核心原因如下：

1. React的useState状态更新是异步批量执行的，调用setBuffer(b)后，React不会立刻修改当前作用域下的buffer变量，只是将新的状态值加入更新队列，等当前所有同步代码执行完毕后，才会触发组件重新渲染。
2. 函数组件每一次渲染都会生成独立的执行快照，你当前在reader.onloadend回调里访问的buffer，是本次组件渲染周期就已经固定的值，也就是调用useState时传入的初始值null，和你刚设置的新值无关。

而return语句里的console.log(buffer)是在状态更新触发组件重渲染之后执行的，重渲染时useState会返回你之前设置的最新状态，所以可以正常打印出buffer值。

如果需要在设置状态后立刻使用最新的buffer值，可以采用两种方案：

• 直接使用你已经声明的临时变量b，这个变量存储的就是你要更新的最新值
• 用useEffect监听buffer的变化，把依赖buffer的逻辑写在useEffect回调中：

import { useEffect } from 'react'

// 组件内添加如下代码
useEffect(() => {
  if (buffer) {
    // 此处执行依赖最新buffer的逻辑
    console.log(buffer)
  }
}, [buffer])

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