Question

我有一个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>
  );
}

您还可以在这里查看代码： https://codesandbox.io/s/sweet-lalande-x8w6p?file=/src/App.js

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

我真的很感谢有人帮助我了解我在这里缺少的东西。谢谢！

Answer 1

将state传递到useEffect：

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

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

1 个答案: