React中useState更新状态为何有时无法立即获取正确值？

问题原因 #

你遇到的核心问题是React的useState状态更新是异步批量处理的。当你点击Add按钮调用SetTask后，父组件Dashboard的task状态不会立刻完成更新，此时Overlay组件接收到的Task props还是更新前的旧值，所以console.log(Task)打印的是旧数据。只有等到下一次组件渲染时，Task才会同步为新的状态值，这就是第二次点击能看到正确结果的原因——此时打印的是上一次更新后的状态。

解决方案 #

方案一：直接打印当前组件内的最新值 #

text和priority是Overlay自身的state，它们是实时更新的，你可以直接打印这两个值，无需依赖父组件传过来的Task props：

<button className="bg-[#0d1821] p-2 w-16 rounded-lg hover:bg-[#3b42a4] transition-all" onClick={() => {
  const newTask = {
    text: text,
    priority: priority
  };
  SetTask(newTask);
  console.log(newTask); // 直接打印刚创建的新对象，这就是最新值
}}>Add</button>

方案二：在父组件监听状态变化 #

如果需要在状态更新完成后执行后续逻辑，可以在Dashboard组件中使用useEffect监听task的变化，确保每次状态更新完成后触发：

import { useState, useEffect } from "react";
import NavBar from "../../components/NavBar";
import Overlay from "../../components/Overlay";

function Dashboard() {
    const [on, setOn] = useState(false);
    const [task, setTask] = useState({
        text: "",
        priority: "",
    });

    // 监听task状态变化，更新完成后执行
    useEffect(() => {
        if (task.text || task.priority) { // 过滤初始空状态的触发
            console.log("更新后的task:", task);
        }
    }, [task]); // 依赖项为task，仅当task变化时执行

    return ( 
        <div className="">
            <NavBar
                onClick={() => setOn(!on)}
            />
            <div className="p-5">
                {on ? <Overlay Task={task} SetTask={setTask} /> : <span></span>}
            </div>
        </div>
     );
};
export default Dashboard;

补充：优化props命名（可选） #

建议将props的Task改为小写task，SetTask改为setTask，符合React小驼峰的命名惯例，避免与变量名混淆，提升代码可读性：

// Overlay组件定义
function Overlay({ task, setTask }) {
  // 内部代码对应修改引用
}

// Dashboard组件传参
<Overlay task={task} setTask={setTask} />

内容的提问来源于stack exchange，提问作者Youssef-mic