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

Question

编译此代码时，我得到“超出最大更新深度。当组件重复调用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

Answer 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