React：卸載組件時狀態不是最新的-有解無憂

在我的作業中，當有人離開頁面時，我必須發出一個 http 請求。我的想法是在該頁面的組件卸載時執行此請求。

如果我理解正確，這可以通過將邏輯放入 useEffect 的回傳函式中來完成。當我這樣做時，它會在正確的時間觸發，但我想要使用的狀態值不是最新的。有沒有辦法獲得最新的值？

      useEffect(() => {
    
        return () => {
    
          //this runs on unmount
         // but the state changes that happened are not registered it seems
        }
      }, [])

我在 codeandbox 中創建了一個簡單的示例：當您將狀態從 4 更改為 8 然后隱藏組件時。卸載中的 NUM 值仍然是 4（檢查控制臺日志）。卸載組件時如何獲取當前狀態值？

React：卸載組件時狀態不是最新的

uj5u.com熱心網友回復：

每次顯示 NumCheck 組件時，num 都會再次分配給 4。

我認為您可以通過將 num 狀態作為道具發送到 NumCheck 組件來解決您的問題。無論 NumCheck 組件是否再次重新渲染，num 的狀態都被分配給父組件（在您的情況下，它將保持為 8）。

Numcheck 組件：

    import "./styles.css";
    import { useEffect, useState } from "react";
    
    export const NumCheck = ({ num, setNum }) => {
      useEffect(() => {
        return () => {
          console.log("NUM CHECK", num);
        };
      }, []);
    
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>click the button to change number</h2>
          <button onClick={() => setNum(8)}>click me</button>
    
          <br />
          <br />
          <h5>{num}</h5>
        </div>
      );
    };

應用組件

export default function App() {
  const [show, setShow] = useState(true);
  const [num, setNum] = useState(4);
  return (
    <>
      {show ? (
        <div>
          <NumCheck num={num} setNum={setNum}  />
          <button onClick={() => setShow(!show)}>hide the component!</button>
        </div>
      ) : (
        <div>
          <h5>hidden</h5>
          <button onClick={() => setShow(!show)}>show the component!</button>
        </div>
      )}
    </>
  );
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334453.html

標籤：javascript 反应反应钩子使用效果使用状态

上一篇：React狀態在重新加載時作業一秒鐘，但崩潰到未定義的錯誤

下一篇：React通過使用useState的功能變體來防止重新渲染