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()