useEffect 與 function 一起更新 state 作為依賴導致無限循環

Question

代碼沙箱： https://codesandbox.io/s/new-breeze-d260k

編碼：

• 這是一個簡單的身份驗證應用程序
• 單擊Login時，accessToken 被交換並存儲在 memory 中，而 refreshToken 存儲在 localStorage 中。
• 雖然 accessToken 有效（此處為時間戳），但主頁顯示受保護的內容
• 在每次頁面重新加載（即應用程序初始化）時，都會將 refreshToken 發送到服務器，如果有效，則交換新的 accessToken。

問題：

• 為了在應用程序初始化時刷新令牌，我在 useEffect 中有一個onRefreshToken() function 要執行一次（我想將一個空數組作為依賴項傳遞，但 typescript/eslint 抱怨並建議onRefreshToken()應該是依賴項。我承認我不明白為什么當您希望效果執行一次時建議始終具有依賴項）。
• 更新令牌后，我將 accessToken 和用戶配置文件存儲在各自的上下文中。
• 無限重新渲染循環開始。 在我的本地服務器上，這是由於setProfile()而不是setAccessToken() 。 但是我不明白為什么。

邊注

上述問題是這篇文章的主要問題，但附帶說明一下，登錄/注銷過程不會在選項卡之間同步，所以如果您知道原因，我也很樂意聽到您在這一點上的建議。

新年快樂

Answer 1

解決此問題的一種方法是檢查您是否有訪問令牌，並且僅在需要時才刷新它：

export default function App() {
  const { accessToken } = useAuthContext();
  const { onRefreshToken, onSyncLogin, onSyncLogout } = useAuth();

  useEffect(() => {
    const refresh = async () => {
      await onRefreshToken();
    };
    !accessToken && refresh();
  }, [onRefreshToken, accessToken]);