反应超过最大更新深度答案

【问题标题】：React Maximum update depth exceeded反应超过最大更新深度
【发布时间】：2019-02-14 06:33:15
【问题描述】：

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

那一个是 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;

问题可能出在这个 jsx 以外的其他地方？？

【问题讨论】：

重定向后出现最大深度错误？
你说的是哪个链接？
我可能写错了，我没有做任何重定向。最上面的组件中只有 2 条路线。我会更新我的问题。
您的问题标题具有误导性
你得到什么错误？我还是无法理解

标签： reactjs

【解决方案1】：

您可能不会相信我，但我通过更改 Route 标签的顺序解决了这个问题。第一个是路径为“/login”的标签，它可以正常工作。

【讨论】：

我有同样的事情，在构造函数的任何地方都没有调度/设置状态。您后来是否遇到任何问题或找出原因。

【解决方案2】：

我认为是因为您正在调用 this.props.dispatch(userActions.logout()); 在您的构造函数中，这不是更新应用程序状态的好地方，因为这会使组件在它被挂载之前重新渲染，并且每次它想要重新渲染时，您都会再次在其构造函数中调用该函数并设置状态，所以它进入一个循环，它一次又一次地调用 setState，最好把 this.props.dispatch(userActions.logout());在像 componentDidMount(){} 这样的生命周期方法中，因此每次挂载组件时，都会调用注销操作并更新应用程序状态。

【讨论】：

【解决方案3】：

根据我的经验，我了解到在箭头函数（即以 ES6 格式编写的函数）中调用 setState 会反复导致此错误。因此，我开始尽可能只使用 ES5 格式的函数。

【讨论】：