React中useEffect调用后localStorage未删除引发最大更新深度超限错误

问题根本原因 #

你/logout页面的useEffect没有传入空依赖数组，导致该 effect 会在每次组件渲染完成后都重复执行，进而触发无限路由跳转，阻塞了 localStorage 清除逻辑的正常执行。

完整循环链路 #

1. 无效token的用户进入/dashboard，发起接口请求拿到999错误码，触发路由跳转到/logout
2. /logout组件首次渲染，执行 effect 逻辑：调用clearStorage、执行history.push("/login")
3. 路由跳转操作会触发关联组件重渲染，此时/logout组件还未卸载，会触发第二次渲染，再次执行相同的 effect 逻辑，又一次调用history.push("/login")
4. 重复的路由跳转不断触发组件重渲染，形成无限循环，React 的更新优先级机制会优先处理渲染和跳转任务，导致clearStorage的执行被反复中断，因此 localStorage 中的存储项始终没有被成功清除
5. 没有被清除的存储项会让/login页面的登录检测逻辑判断用户已登录，再次跳转到/dashboard，进一步加剧循环

手动输入地址访问/logout时，不会触发前置的/dashboard跳转逻辑，/logout组件只会渲染一次，因此 effect 逻辑可以正常执行完成，localStorage 可以被正常清除。

修复方案 #

给/logout页面的useEffect添加空依赖数组，保证逻辑只在组件首次挂载时执行一次即可：

useEffect(() => {
    clearStorage();
    history.push("/login")
}, []) // 新增空依赖数组

可选优化：你可以把路由鉴权逻辑抽离到统一的路由守卫层，不需要分散在每个页面组件的useEffect中，避免后续出现类似的逻辑冲突。

内容的提问来源于stack exchange，提问作者Itzik.B