代码之家  ›  专栏  ›  技术社区  ›  Eric

超出最大更新深度

  •  0
  • Eric  · 技术社区  · 6 年前

    在React中运行应用程序时收到错误。这个错误有很多问题,但我不知道如何解决。当我按下链接时,它会指向登录组件 http://localhost:3000/login '

    '超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate中的setState时,可能会发生这种情况。React限制嵌套更新的数量,以防止无限循环

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

    这是路由部分。

    render() {
      const { alert } = this.props;
      return (
    
      <Router history={history} >
        <Switch>
          <PrivateRoute path="/" name="Home" component={DefaultLayout} />
          <Route exact path="/login" component={LoginPage} />
        </Switch>
      </Router>
      );
    }
    

    这就是默认布局:

    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;
    

    问题可能出在jsx之外的其他地方??

    3 回复  |  直到 6 年前
        1
  •  5
  •   Eric    6 年前

        2
  •  1
  •   Mehrnaz.sa    6 年前

    我想是因为你在打电话这个。道具。派送(用户操作.注销()); 在您的构造函数中,这不是更新应用程序状态的好地方,因为这将使组件在装入之前重新呈现,并且每次它要重新呈现时,您都要再次调用其构造函数中的函数并设置状态,以便它进入一个循环,在该循环中它一次又一次地调用setState,最好放这个。道具。派送(用户操作.注销());在像componentDidMount(){}这样的生命周期方法中,因此每次装入组件时,都会调用注销操作并更新应用程序状态。

        3
  •  1
  •   Sahitya D    6 年前