State 未在控制台中显示更新值

Question

尽管页面上的文本得到了更新，但 console.log 仍然会注销初始值。 为什么是这样？ 我知道设置 state 是异步的，但为什么即使等待 1 秒后它仍会注销旧值？

import { useState, useEffect, useRef } from "react";

function App() {
  const [requestState, setRequestState] = useState("initial");

  useEffect(() => {
    setRequestState("changed");
    setTimeout(() => {
      console.log(requestState);
    }, 1000);
  }, []);

  return (
    <div className="App">
      {requestState}
    </div>
  );
}

export default App;

Answer 1

useEffect 将在组件渲染时运行，要有条件地调用 function，请指定依赖项列表。 经验法则是始终在 useEffect() 中添加您正在使用的那些依赖项

    import { useState, useEffect, useRef } from "react";
    
    function App() {
    const [requestState, setRequestState] = useState("initial");
    setRequestState("changed");  
    useEffect(() => {
    setTimeout(() => {
      console.log(requestState);
    }, 1000);
    }, [requestState]);

      return (
        <div className="App">
          {requestState}
        </div>
      );
    }
    
    export default App;

Answer 2

您的useEffect取决于 requestState 变量，因此将其传递到空列表中，如下所示：

useEffect(() => {some code},[used variables])

Answer 3

useEffect()钩子在执行时“捕获” state 和道具。 这就是为什么它具有陈旧的价值。 该值来自运行useEffect()中的 function 时的值。

这是 Dan Abramov 的一篇漂亮文章： https://overreacted.io/a-complete-guide-to-useeffect/ 。 它对与您的问题几乎完全相同的问题进行了解释。 完整阅读它以深入了解useEffect()