从useEffect调用 localStorage键后未删除，导致最大更新深度超过错误

Question

我有两条路由，我不希望允许登录用户访问。

/login
/forgot-password

在这些组件中，我应用了useEffect函数来检测用户是否"登录"。这样的:

useEffect(() => {
if(isLogged()){
history.push("/dashboard")
}
}, [])
export const isLogged = () => {
return (
localStorage.getItem("userid") !== null ||
localStorage.getItem("authUser") !== null ||
localStorage.getItem("token") !== null ||
localStorage.getItem("permission") !== null
)
}

现在，如果用户登录了，它将移动到/dashboard

在/dashboard上，我用API请求服务器检查用户的真实性，如果数据无效，我将用户重定向到/logout

useEffect(() => { //act like componentDidMount()
getInstitutes().then((response) => {
if (response.errorCode !== null && response.errorName !== null) {
if (response.errorCode === 999) { //invalid token so... logout please.
props.history.push('/logout')
} else {
setErrorMsg(response.errorName)
setErrorNum(response.errorCode)
}
} else {
setInstitutesList(response.object)
}
}).catch((e) => {
setErrorMsg("Error occur.")
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 

On/logout-

useEffect(() => {
clearStorage();
history.push("/login")
})

clearStorage()功能:

export const clearStorage =  () => {
localStorage.removeItem("userid")
localStorage.removeItem("authUser")
localStorage.removeItem("token")
localStorage.removeItem("permission")
}

然后我收到这个错误，说我在无限循环中，这是因为localStorage项根本没有被删除，这导致了无限循环。

我不知道为什么localStorage的项目不这样删除，

当我手动输入路由/logout时，它成功地删除了条目。

我错在哪里?

谢谢!

Answer 1

您忘记在/logout路径中传递依赖项数组了吗?

useEffect(() => {
clearStorage();
history.push("/login")
}, []) // <--- here

Answer 2

从我的角度来看，这个逻辑不应该是组件的一部分，你可以把它放在获得isLogged的auth钩子中，或者你可以把它放在你的路由组件中。只需添加一个prop，指定该路由的访问级别，并在那里设置逻辑。

无论如何都不应该是组件本身的一部分。