Javascript 尝试读取React状态会给出初始状态，而不是更新状态

我有一个React函数组件，它监听按钮的点击并相应地更改状态。 我可以看到，在视图中，状态确实随着再膨胀而改变。然而，当试图读取当前状态时，它似乎仍然是初始状态：

import React from "react";

export default function App() {
  const [state, setState] = React.useState("Not Changed");
  const [print, setPrint] = React.useState(null);

  const change = () => {
    setState("Changed!!!");
  };

  React.useEffect(() => {
    setPrint(() => {
      return () => {
        console.warn("state > ", state); //=> "state >  Not Changed"
      };
    });
  }, []);

  return (
    <div className="App">
      <div style={{ border: "1px solid black", marginBottom: "30px" }}>
        <button onClick={change}>Change State</button>
        <div>{state}</div>
      </div>
      <button onClick={print}>Print State</button>
    </div>
  );
}

从“React”导入React；
导出默认函数App（）{
const[state，setState]=React.useState（“未更改”）；
const[print，setPrint]=React.useState（null）；
常量更改=（）=>{
设置状态（“已更改！！！”；
};
React.useffect（（）=>{
setPrint（（）=>{
return（）=>{
console.warn（“状态>”，状态）；//=>“状态>未更改”
};
});
}, []);
返回(
改变状态
{state}
打印状态
);
}

您还可以在此处看到工作的代码：

在浏览器中，我看到html更新为“Changed！！！”。但在控制台中，我仍然看到“状态>未更改”正在打印

---

我真的很感激有人帮我弥补我在这里所缺少的东西。谢谢

将

状态

传递到

使用效果

：

  React.useEffect(() => {
    setPrint(() => {
      return () => {
        console.warn("state > ", state);
      };
    });
  }, [state]);

---

您知道

useffect

的第二个参数的作用是什么吗？您传递的是一个空数组，这意味着函数只有在组件挂载时才能捕获状态值。是的，实际上是这样。但我读到，这是一种常见的做法，让某些东西在挂载机上只运行一次。不是吗？还有-为什么对state的引用指向初始值？您编写它的方式是，“效果”是使用状态值设置dispatcher回调“when is mounted”。如果您想用新的状态值更新该效果，那么您需要将

state

添加到依赖项数组中，这将根据您拥有的代码

useffect（…，[state]）

非常有意义，谢谢。这确实有效。现在我只是想弄明白为什么。它的“状态”是应用程序范围内的变量？为什么在这里读取它是指初始值？如果不传递它，useEffect的工作原理与componentDidMount类似。