时间戳

首页 > 解决方案 > ReactJs抛出最大更新深度错误

node.js - ReactJs抛出最大更新深度错误

问题描述

我正在构建一个反应应用程序来学习反应。我已经实现了上下文以在用户登录时存储有关用户的信息，并且还在本地存储中制作副本。我在 App 组件中验证用户是这样登录的

function App() {
const [user, setUser] = useContext(UserContext);
return (
        <div className="App">
            <Router>
                <NavBar />
                    <Switch>
                        <Route path="/login" exact>
                            {!user.loggedIn ? <LoginForm /> : <Redirect to="/profile" />}
                        </Route>
                    </Switch>
            </Router>
        </div>
    );

这工作得很好。但是如果令牌已经过期；我希望用户被强制进入登录页面。这意味着我需要检查每个路由请求的到期时间，因为用户可以在其中的配置文件中，如果他们点击另一个链接，他们将被重定向到登录组件。我应该如何处理这个？我试图在应用程序组件中使用 useEffect ，当它满足条件时将状态loggedIn设置为true，并进行了比较

    useEffect(function () {
        const ct = parseInt(Date.now().toString(), 10);
        const iat = parseInt(localStorage.getItem('iat'), 10);
        if (ct - iat < 60000) {
            setUser({ loggedIn: true });
        } else {
            setUser({ loggedIn: false });
        }
    });

据我了解，每次渲染 App 组件时都会发生这种情况，因此我没有向 useEffect 提供任何输入，但这显然会引发maximum update depth reached错误。我应该如何实现这种行为？

标签： node.jsreactjssessionjwt

解决方案

编辑：应用程序组件不会重新呈现，因为它永远不会改变，只有子组件是。你可以做的是，你可以将history.location你的依赖项放在 useEffect 中，只要路径发生变化，它就会触发 useEffect。请参阅：如何在反应路由器 v4 中监听路由变化？

如果你 console.log 在你的组件主体中，你会看到它会随着每个节点的更新而重新渲染很多次。您需要添加一个空的依赖项数组或一些依赖项，以便它仅在需要时运行 useEffect。

useEffect(() => {
//your logic here
}, [])

我认为您还可以通过对您的setUser方法进行另一次检查来减轻此错误。这样，您将减少对 setState 方法的大量不必要调用，这是造成这种情况的原因之一maximum depth reached error

useEffect(function () {
       //other code
        if (!loggedIn && ct - iat < 60000) {
            setUser({ loggedIn: true });
        } else if(loggedIn){
            setUser({ loggedIn: false });
        }
    });

此外，通常有更好的方法来检查用户是否需要重新验证，如果您使用的是 Axios，您可以在拦截器中设置检查以在拨打电话之前进行此比较，如果用户未经验证，则将其重定向到登录页。

推荐阅读