React useState设置File对象不生效 setFile调用后状态值未更新

这不是useState()不支持存储File对象的问题，是React状态更新机制导致的正常表现：

• React对state更新做了异步批处理，调用setFile()不会同步修改当前函数作用域内的file变量
• 当前onChange回调里的file是本次渲染捕获的闭包值，在整个回调执行周期里都不会变，你同步打印拿到的永远是上一轮渲染的旧值（也就是初始的undefined）
• 状态更新会触发组件重渲染，只有下一次组件执行时，useState才会返回更新后的File值，赋值本身是成功的。

加个useEffect监听file变化就能确认值已经设置成功：

const [file, setFile] = useState<File>()

// 监听file状态变化，更新后自动执行
useEffect(() => {
  console.log("更新后的file：", file) // 此处可正常打印传入的File对象
}, [file])

const onChange = async (
    imageList: ImageListType,
    addUpdateIndex: number[] | undefined
) => {
    if (imageList[0].file) {
        console.log("first image: ", imageList[0].file)
        setFile(imageList[0].file)
    }

    console.log("file: ", file) // 此处属于当前闭包，永远拿不到刚设置的新值
}

• 如果onChange后续逻辑需要用到刚选中的文件，直接使用imageList[0].file这个原始变量即可，不需要等state更新
• 所有依赖最新file状态的逻辑，要么放到useEffect中监听file变化触发，要么在重渲染后的JSX/其他执行逻辑中读取
• React state支持存储任意合法JS类型，File、Blob这类对象都可以正常存储，不存在特殊类型无法赋值的问题。

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