Question

尽管页面上的文本得到更新，console.log 仍会注销初始值。为什么是这样？我知道设置状态是异步的，但为什么即使等待 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 会在组件渲染时运行，有条件地调用一个函数，指定依赖列表。经验法则是始终添加您在 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() 钩子在执行时“捕获”状态和道具。这就是为什么它具有过时的价值。该值来自 useEffect() 中的函数运行时。

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

状态未在控制台中显示更新值

3 个答案: