时间戳

首页 > 解决方案 > ReactJS：从本地存储令牌获取数据时超出了最大更新深度

reactjs - ReactJS：从本地存储令牌获取数据时超出了最大更新深度

问题描述

我在以下代码中收到上述错误。有人能帮我找出这段代码有什么问题吗？谢谢

const [userData, setUserData] = useState({});

  useEffect(() => {
    const user = auth.getCurrentUser();
    setUserData(user);
  });

这是getCurrentUser功能

export function getCurrentUser() {
  try {
    const jwt = localStorage.getItem(tokenKey);
    return jwtDecode(jwt);
  } catch (ex) {
    return null;
  }
}

标签： reactjsreact-hooks

解决方案

使用时应非常谨慎useEffect。

以下是您在实施中使用的内容。这也是为什么错误的问题。

  useEffect(() => {
    const user = auth.getCurrentUser();
    setUserData(user);
  });

要了解究竟发生了什么只是一个背景useEffect。当useEffect在没有任何依赖的情况下使用时，它会在每次渲染组件时执行。请在这里查看更多信息。

因此，在这种情况下，useEffect您正在尝试更新组件的状态，这将导致组件重新渲染，正如再次讨论的那样，useEffect将再次调用状态更新并继续循环。

setUserData() -> component re-render -> setUserData() -> component re-render -> setUserData() -> component re-render ....the cycle goes on

因此，理想情况下，您应该在安装组件后仅获取一次当前用户详细信息，这可以通过[]作为依赖项传递给useEffect如下来完成

  useEffect(() => {
    const user = auth.getCurrentUser();
    setUserData(user);
  }, []);

希望这可以帮助。

推荐阅读