CODEWITHSUNDEEP
reactjs
Eric
Eric

Reputation: 469

React Maximum update depth exceeded

I receive an error while running my application in React. There are lots of questions with this error but I do not how to solve it. When I press the link, it directs to Login component. 'http://localhost:3000/login'

This is the error which I got on the site:

'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.'

Here is my LoginPage:

class LoginPage extends React.Component {
    constructor(props) {
        super(props);

        // reset login status
        this.props.dispatch(userActions.logout());

        this.state = {
            username: '',
            password: '',
            submitted: false
        };
    }

    render() {
        return (
            <div className="col-md-6 col-md-offset-3">
                <h2>Login</h2>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return { auth: state.auth };
}
const loginComp = connect(mapStateToProps)(LoginPage);
export { loginComp as LoginPage };

And this is the routing part. 

render() {
  const { alert } = this.props;
  return (

  <Router history={history} >
    <Switch>
      <PrivateRoute path="/" name="Home" component={DefaultLayout} />
      <Route exact path="/login" component={LoginPage} />
    </Switch>
  </Router>
  );
}

And that one is DefaultLayout:

import React, { Component } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { Container } from 'reactstrap';

import {
  AppAside,
  AppBreadcrumb,
  AppFooter,
  AppHeader,
  AppSidebar,
  AppSidebarFooter,
  AppSidebarForm,
  AppSidebarHeader,
  AppSidebarMinimizer,
  AppSidebarNav,
} from '@coreui/react';
// sidebar nav config
import navigation from '../../_nav';
// routes config
import routes from '../../routes';
import DefaultAside from './DefaultAside';
import DefaultFooter from './DefaultFooter';
import DefaultHeader from './DefaultHeader';

class DefaultLayout extends Component {
  render() {
    return (
      <div className="app">
        <AppHeader fixed>
          <DefaultHeader />
        </AppHeader>
        <div className="app-body">
          <AppSidebar fixed display="lg">
            <AppSidebarHeader />
            <AppSidebarForm />
            <AppSidebarNav navConfig={navigation} {...this.props} />
            <AppSidebarFooter />
            <AppSidebarMinimizer />
          </AppSidebar>
          <main className="main">
            <AppBreadcrumb appRoutes={routes}/>
            <Container fluid>
              <Switch>
                {routes.map((route, idx) => {
                    return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
                        <route.component {...props} />
                      )} />)
                      : (null);
                  },
                )}
                <Redirect from="/" to="/dashboard" />
              </Switch>
            </Container>
          </main>
          <AppAside fixed hidden>
            <DefaultAside />
          </AppAside>
        </div>
        <AppFooter>
          <DefaultFooter />
        </AppFooter>
      </div>
    );
  }
}

export default DefaultLayout;

The problem could be somewhere else other than this jsx??

Upvotes: 1

Views: 4731

Answers (3)

Sahitya D
Sahitya D

Reputation: 166

From my experience, i understood that calling setState inside arrow functions (that is, function written in ES6 format) repeatedly causes this error. Therefore, as much as much possible i started using ES5 format functions only.

Upvotes: 1

Eric
Eric

Reputation: 469

You are not going to believe me maybe but I solved the issue by changing the order of Route tags. First one is the tag with path "/login" and it works correctly.

Upvotes: 6

Mehrnaz.sa
Mehrnaz.sa

Reputation: 386

I think its because you are calling this.props.dispatch(userActions.logout()); in your constructor and that is not a good place to update the application state, because that will make the component to re-render before it gets mounted and each time it wants to re-render you are again calling the function in its constructor and setting the state so it gets into a loop where it calls the setState again and again, its better to put this.props.dispatch(userActions.logout()); in a lifeCycle method like componentDidMount(){} so each time your component gets mounted, your logout action gets called and updated the application state.

Upvotes: 1

Related Questions