React useEffect：返回函數中的setState沒有及時更新狀態

Question

我在從一個切換到另一個時制作了一個選項卡式界面，一個組件應該首先通過useEffect返回函數取消注冊自己（從父狀態清除一些值），然后重新注冊自己（在父級中設置一些值）。 但是，清理似乎不起作用。 即該值在寄存器功能開始之前不會改變。

查看控制台日志，第一次記錄一個空對象，作為初始值。 但是當點擊 tab20 時，記錄的值顯示的是注銷前的值。

這里有什么問題？

我期待發生的是：

（應用加載）-> 控制台日志：{} -> [注冊]aaa 設置為 1 ->（切換選項卡）-> [取消注冊]aaa 設置為未定義 -> 控制台日志：{aaa：未定義（但它是 1） } -> [注冊]aaa 設置為 1

Answer 1

（應用加載）-> 控制台日志：{} -> [注冊]aaa 設置為 1 ->（切換選項卡）-> [取消注冊]aaa 設置為未定義 -> 控制台日志：{aaa：未定義（但它是 1） } -> [注冊]aaa 設置為 1

其實它的：

(應用加載) -> 控制台日志 (myVal):{} -> [register]aaa 設置為 1 -> (switch tab) -> 使用 (myVal = {aaa:1}) 更新注冊中的閉包 -> [取消注冊]aaa 設置為未定義 -> 控制台日志：{aaa: 1}（因為之前的關閉）

問題是當您切換選項卡時，組件會重新渲染，並且會重新聲明register函數，該函數正在更新其閉包 ( myVal )。

要修復它（日志結果），去掉閉包：

const register = useCallback(name => {
  setMyVal(prevState => {
    console.log(prevState);
    return { ...prevState, [name]: 1 };
  });
}, []);