Превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри (Jwt) Redux

Question

При компиляции этого кода я получаю «Превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. 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);

Я использовал избыточность для управления состоянием. Я не знаю, почему это произошло?Там находится папка моего проекта. введите описание ссылки здесь

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