派遣時它顯示未捕獲的 RangeError：超出最大調用堆棧大小

Question

我正在從 Navbar 組件發送注銷操作，但它顯示我每次單擊注銷按鈕時都超出了最大調用堆棧大小。

authSlice.js:

export const logout = createAsyncThunk("logout", async (action) => {
  localStorage.clear();
  return action;
});

導航欄.js

  const logout = () => {
    dispatch(logout());
    setUser(null);
  };

Answer 1

命名不明確引起的死循環

您有兩個功能稱為logout ！

const logout = () => {
    dispatch(logout()); // <-- calls itself
    setUser(null);
};

這里的第二行logout()沒有調用你的 thunk 動作創建者。 它在第一行調用函數。 然后執行第二行，調用第一行，執行第二行......直到達到最大調用堆棧大小。

---

確保將logout thunk 導入到組件文件中。

import { logout } from '../some/thunk/file';

並將您的事件處理程序重命名為其他名稱。

const handleLogout = () => {
    dispatch(logout()); // <-- calls the imported thunk
    setUser(null);
};

---

也可以在導入時重命名 thunk，如果您想這樣做的話。

import { logout as logoutAction } from '../some/thunk/file';

const logout = () => {
    dispatch(logoutAction()); // <-- calls the imported thunk
    setUser(null);
};