useEffect 与更新状态的函数作为依赖导致无限循环答案

【问题标题】：useEffect with function that update the state as dependency leads to infinite loopuseEffect 与更新状态的函数作为依赖导致无限循环
【发布时间】：2022-01-04 09:51:21
【问题描述】：

代码沙盒：https://codesandbox.io/s/new-breeze-d260k

代码：

这是一个简单的身份验证应用程序
当你点击Login时，accessToken被交换并存储在内存中，而refreshToken被存储在localStorage中。
虽然 accessToken 有效（此处为时间戳），但主页显示受保护的内容
在每次页面重新加载（即应用程序初始化）时，都会将 refreshToken 发送到服务器，如果有效，则会交换新的 accessToken。

问题：

为了在 App 初始化时刷新令牌，我在 useEffect 中有一个 onRefreshToken() 函数要执行一次（我想传递一个空数组作为依赖项，但 typescript/eslint 抱怨并建议 onRefreshToken() 应该是依赖项.我承认我不明白为什么当您希望效果执行一次时建议始终具有依赖项）。
更新令牌后，我将 accessToken 和用户配置文件存储在各自的上下文中。
无限重新渲染循环开始。在我的本地服务器上，这是由于setProfile() 而不是setAccessToken()。但是我不明白为什么。

旁注

上述问题是这篇文章的主要问题，但附带说明，登录/注销过程不会在选项卡之间同步，所以如果您知道原因，我很乐意听取您在这一点上的建议好吧。

新年快乐

【问题讨论】：

标签： javascript reactjs authentication use-effect use-state

【解决方案1】：

解决此问题的一种方法是检查您是否有访问令牌，并仅在需要时刷新它：

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

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

【讨论】：