Recibo un error al ejecutar mi aplicación en React. Hay muchas preguntas con este error, pero no sé cómo resolverlo. Cuando presiono el enlace, se dirige al componente Iniciar sesión. 'http: // localhost: 3000 / login'

Este es el error que obtuve en el sitio:

'Profundidad máxima de actualización excedida. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita el número de actualizaciones anidadas para evitar bucles infinitos '.

Aquí está mi página de inicio de sesión:

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 }; 

Y esta es la parte de enrutamiento.

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

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

Y esa es 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;

El problema podría estar en otro lugar que no sea este jsx ??

0
Eric 9 sep. 2018 a las 21:17

3 respuestas

La mejor respuesta

Tal vez no me va a creer, pero resolví el problema cambiando el orden de las etiquetas de ruta. El primero es la etiqueta con la ruta "/ login" y funciona correctamente.

1
Eric 9 sep. 2018 a las 23:03

Creo que es porque estás llamando a this.props.dispatch (userActions.logout ()); en su constructor y ese no es un buen lugar para actualizar el estado de la aplicación, porque eso hará que el componente se vuelva a renderizar antes de que se monte y cada vez que quiera volver a renderizar está llamando nuevamente a la función en su constructor y configuración el estado por lo que entra en un bucle donde llama al setState una y otra vez, es mejor poner this.props.dispatch (userActions.logout ()); en un método lifeCycle como componentDidMount () {} por lo que cada vez que se monta su componente, se llama a su acción de cierre de sesión y se actualiza el estado de la aplicación.

1
Mehrnaz.sa 9 sep. 2018 a las 20:30

Desde mi experiencia, entendí que llamar a setState dentro de las funciones de flecha (es decir, la función escrita en formato ES6) causa repetidamente este error. Por lo tanto, tanto como sea posible, comencé a usar solo las funciones de formato ES5.

1
Sahitya D 24 ene. 2019 a las 05:05