为何HTML组件中能立即读取useState更新值，函数中需等下一次渲染？

先提个代码里的小问题：你的代码里<from>标签拼写错误，应该写成<form>，否则表单可能无法正常触发submit事件。

这本质是React状态更新的异步机制+闭包特性共同作用的结果，拆解来看：

1. 事件函数里的状态是闭包捕获的旧值 #

当组件第一次渲染时，submit函数被创建，它会捕获当前渲染周期的data值（也就是初始的'previous'）。

调用setData('updated')时，React并不会立刻修改当前作用域里的data变量，而是把这个更新请求加入任务队列，等待当前事件循环的同步代码执行完后，才会触发组件重新渲染。所以在setData之后立刻console.log(data)，输出的还是闭包里捕获的旧状态。

2. 组件渲染时读取的是新渲染周期的状态 #

当React处理完状态更新队列，会重新调用weird组件函数生成新的UI。这时组件会拿到更新后的data值（'updated'），JSX里的{data ? console.log(data) : ''}是在新的渲染周期里执行的，自然能读取到最新的状态。

补充：如何在事件函数里获取更新后的状态？ #

如果需要在状态更新后立刻执行逻辑，推荐用useEffect监听状态变化：

import { useState, useEffect } from 'react'
function weird() {
    const [data, setData] = useState('previous')

    useEffect(() => {
      console.log('当前最新的data:', data);
    }, [data]); // 只有data变化时才执行

    function submit(e) {    
        e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
        setData('updated')   
    }
    return (
        <form onSubmit={(e)=> submit(e)}>
            {data ? console.log(data) : ''}
            <button type="submit">提交</button>
        </form>
    )
}
export default weird

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