组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState。 React 限制了编号。嵌套更新以防止无限循环答案

【问题标题】：component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the no. of nested updates to prevent infinite loops组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState。 React 限制了编号。嵌套更新以防止无限循环
【发布时间】：2023-01-31 13:41:43
【问题描述】：

我收到此错误：“超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制嵌套更新的数量以防止无限循环。”

什么时候历史推送（“/”）在调用 demoPortalPage 时，有时它会进入无限循环并无限次设置路径。

错误截图：screenshort of error

演示门户页面.jsx

useEffect(() => {
    const authenticateDemoUser = async () => {
        const authData = {
            email: 'demo@gmail.com',
            password: '1234',
        };

        const checkUserAuth = await postRequest("authenticate", authData);

        if (checkUserAuth?.status >= 200 && checkUserAuth?.status < 300) {
            // sign in success action call
                await signInSuccess(checkUserAuth.data);
                await getAndSaveUserName();
                await setIsUserVerified(true);
                // localStorage.setItem('is_demo', "true")
                history.push("/");
            
        } else {
             await setIsUserVerified(false);
             history.push("/");
        }
    }
    authenticateDemoUser()

}, [])

应用程序.jsx

 ....   
    <Route exact path={"/login"} render={() => (isUserVerified ? <Redirect to="/" /> : <LoginPage/>)} />
                               
    <Route exact path={"/demo-login"} component={DemoPortalPage} />
 ....

请帮我解决这个错误

【问题讨论】：

我认为你应该检查 return cancel = true 语句是否有错误，请确保它是正确的
我检查了，因为 return cancel = true 语句没有抛出任何错误。发生错误是因为当我继续刷新路由“/demo-login”时，重复设置了 app.jsx 中的路径。
我认为没有足够的信息来帮助你。你能提供更多细节吗？
添加了错误的屏幕截图
这个 isUserVerified 标志在哪里，在 App.tsx 或 DemoPortalPage.jsx 或两者中？

标签： javascript reactjs

【解决方案1】：

它被解决并且我想从我的案例角度给你澄清这件事..！就我而言，这是由于异步序列而发生的……！在将数据保存在状态之前，页面重定向到另一个页面，下一页不会获取该数据..！根据我的路由代码，如果页面没有特定数据，它会在循环中一次又一次地检查，这就是无限循环错误发生的原因。

谢谢你。

【讨论】：