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

Question

I am getting this error:"Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

When history.push("/") in demoPortalPage is called, sometimes it goes in infinite loop and set path infinite times.

Screenshort of Errors: screenshort of error

DemoPortalPage.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()

}, [])

App.jsx

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

Please help me for solve this error

Answer 1

It is solved and I want to give you clarify for this thing on my case perspective... In my case it was happening because of asynchronous sequence.,. Before it saves data in state. Page redirects to another page and next page don't get that data,.! As per my routing code, If page don't have that specific data it checks again and again in loop and that's why infinite loop error occurs.

Thank you.