javascript - 尝试读取 React 状态会给出初始状态而不是更新后的状态

Question

我有一个 React 函数组件，它监听按钮的点击并相应地更改状态。我可以看到状态确实随着 View 中的重新显示而发生了变化。然而，当尝试读取当前状态时 - 它似乎仍然是初始状态:

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>
  );
}

您还可以在此处查看代码的工作原理: https://codesandbox.io/s/sweet-lalande-x8w6p?file=/src/App.js

在浏览器中 - 我看到 html 已更新为“已更改!!!”。但在控制台中，我仍然看到打印“state > Not Changed”。

我真的很感谢有人帮助我找到我在这里缺少的东西。谢谢!

Answer 1

将state传递给useEffect:

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