超过最大更新深度。当组件在 (Jwt) Redux 内部重复调用 setState 时，可能会发生这种情况答案

【问题标题】：Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside (Jwt ) Redux超过最大更新深度。当组件在 (Jwt) Redux 内部重复调用 setState 时，可能会发生这种情况
【发布时间】：2019-07-25 18:55:21
【问题描述】：

编译此代码时，我得到“超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制嵌套更新的数量以防止无限循环。”。

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { store } from './helpers';
import { Provider } from 'react-redux';
import { configureFakeBackend } from './helpers';

configureFakeBackend();
ReactDOM.render(
  <Provider store={store} >
    <App />
  </Provider>
,
 document.getElementById('root'));

serviceWorker.unregister();

//App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { Layout, Menu } from 'antd';
import { history } from './helpers';
import './App.css';
import { alertActions } from './actions';
import PrivateRoute from './components/PrivateRoute';
import LoginPage from './containers/LoginPage';
import Dashboard from './containers/Dashboard';
import Boards from './containers/Boards';
import Board from './containers/Board';
import NoMatch from './containers/NoMatch';


const { Header, Content, Footer } = Layout;

class App extends Component {
  constructor(props){
    super(props);
    const { dispatch } = this.props;
    history.listen((location, action) => {
      // clear alert on location change
      dispatch(alertActions.clear());
    });
  }
  render() {
    const { alert } = this.props;
    return (
      <Router history={history} >
        <Layout>
          <Header className="header">
            <div className="logo" />
            <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={['1']}
              style={{ lineHeight: '64px' }}
            >
              <Menu.Item key="1">
                <Link to="/">Dashboard</Link>
              </Menu.Item>
             <Menu.Item key="2">
                <Link to="/boards">Boards</Link>
              </Menu.Item>
            </Menu>
          </Header>

          <Content style={{ padding: '0 50px' }}>
            <Layout style={{ padding: '24px 0', background: '#fff' }}>
              <Content style={{ padding: '0 24px', minHeight: 700 }}>
                <Switch>

                   <PrivateRoute exact path="/" component={Dashboard} />

                   <PrivateRoute path="/boards/:id" component={Board} />
                  <PrivateRoute path="/boards" component={Boards} />
                  <PrivateRoute component={NoMatch} />
                  <Route path="/login" component={LoginPage} />
                </Switch>
              </Content>
            </Layout>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Abcd</Footer>
        </Layout>
      </Router>
    );
  }
}

function mapStateToProps(state){
  const { alert } = state;
  return {
    alert
  }
}

export default connect(mapStateToProps)(App);

我使用 redux 进行状态管理。我不知道为什么会这样？有我的项目文件夹。 enter link description here

【问题讨论】：

好吧，您似乎并没有在您共享的代码中调用this.setState，因此没有什么真正的建议。你可以分享堆栈跟踪吗？您是否根据安全令牌在某处更改位置？您是否有机会创建一个 [mvce] 以便我们重现错误？
@Icepickle 我添加了我的项目文件夹链接。您可以查看:)
只需将您的路线与登录移动到开关的顶部，并将不匹配移动到最后一个位置，这应该可以做到，而无需更改您希望对历史监听器执行的任何操作，并且你仍然可以有未知的路线

标签： reactjs redux jwt

【解决方案1】：

这很简单，你有那个代码

<Switch>

                   <PrivateRoute exact path="/" component={Dashboard} />

                   <PrivateRoute path="/boards/:id" component={Board} />
                  <PrivateRoute path="/boards" component={Boards} />
                  <PrivateRoute component={NoMatch} />
                  <Route path="/login" component={LoginPage} />
                </Switch>

在您的 app.js 中。你有一个没有路径的 privateRoute，只是它：D 改变

                      <PrivateRoute component={NoMatch} />

到

                      <PrivateRoute path="blablabla" component={NoMatch} />

但是，要运行该测试，我需要评论您调度代码

constructor(props){
    super(props);
    // history.listen((location, action) => {
    //   // clear alert on location change
    //   dispatch(alertActions.clear());
    // });
  }

我认为有更好的方法来使用调度，只需搜索

我希望它有用:D:D:D

【讨论】：