javascript - 尝试检查用户是否登录时的useEffect无限循环
问题描述
我正在使用 auth0,并且当应用程序重新渲染时可能在页面刷新时,我尝试使用 auth0 做几件事,第一个是检查用户是否经过身份验证,以及他是否将他的令牌和用户对象保存在mobx 商店,否则将他重定向到登录页面。这是我目前使用的代码:
// appLoaded --> to check if the user is logged in (app cannot be used without a user)
const App: React.FC = () => {
const {
// isAuthenticated,
user,
getIdTokenClaims,
loginWithRedirect,
isAuthenticated
} = useAuth0();
const {
sideNavStore: { isOpen, toggleSideBar },
authStore: { setAppLoaded, setToken, setUser, appLoaded }
} = useStore();
// get the user from auth0 and store their details in the mobx store;
useEffect(() => {
if (isAuthenticated) {
getIdTokenClaims().then((response) => {
// eslint-disable-next-line no-underscore-dangle
setToken(response.__raw);
setUser(user);
});
} else {
loginWithRedirect().then(() => {
setAppLoaded(false);
});
}
}, [
isAuthenticated,
setToken,
setUser,
setAppLoaded,
loginWithRedirect,
getIdTokenClaims,
user
]);
if (!appLoaded) return <PreLoader />;
return (
// some component code
)}
我在上面的代码中遇到了一个无限循环。我已经在这个问题上讨论了一天,只是决定在这里提问。谁能告诉我我做错了什么?谢谢
解决方案
useEffect
您不应该从其中更新 a所依赖的任何状态。这会创建一个无限循环。
您对单一的依赖项太多,useEffect
并且正在更新其中的一些。将您的代码拆分为useEffect
具有较少依赖项的多个代码,确保它们中的每一个都不会更新它自己的依赖项
推荐阅读
- c++ - OpenCV C++ absdiff() 未处理异常
- python-3.x - 为什么用 Process 调用多处理模块可以创建相同的实例?
- python - 删除新的换行符,但仅在引号之间
- flutter - 使用手势检测器,但接收预期类型为“地图”的值
',但得到了“空”类型之一 - powershell - 如何在 PowerShell 中关闭安装完成对话框?
- arrays - 为什么最终数组返回最后一个数组的 7 行编译而不是 Google Apps 脚本中的 7 个唯一数组值?
- javascript - 在 FullCalendar 月时间线视图中显示多年?
- java - 如何在没有getProtectionDomain的Android应用程序中获取Kotlin中当前类文件的路径
- python - 如何对csv文件中的列进行排序?
- javascript - 如何删除两个单词之间的所有空格?