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

Question

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

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;
}
}

Answer 1

使用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);
}, []);

希望这有帮助。

Answer 2

你必须试试这个

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