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

Posted 2023-02-19

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

【英文标题】：Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside (Jwt ) Redux

【发布时间】：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 我添加了我的项目文件夹链接。您可以查看:)

只需将您的路线与登录移动到开关的顶部，并将不匹配移动到最后一个位置，这应该可以做到，而无需更改您希望对历史监听器执行的任何操作，并且你仍然可以有未知的路线

【参考方案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