Uncaught Invariant Violation：超过最大更新深度答案

【问题标题】：Uncaught Invariant Violation : Maximum update depth exceededUncaught Invariant Violation：超过最大更新深度
【发布时间】：2019-02-20 16:13:33
【问题描述】：

当组件在componentWillUpdate 或componentDidUpdate 内重复调用setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

由于此错误，我无法路由到 authenticationRoute 目的地。

控制台输出：

index.js:1446 组件出现上述错误：

in Redirect (at Auth.jsx:101)
in div (at Auth.jsx:116)
in Auth (created by Context.Consumer)
in Connect(Auth) (created by Route)
in Route (at App.js:27)
in Switch (at App.js:26)
in div (at App.js:46)
in App (created by Context.Consumer)
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App)) (at src/index.js:28)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:27)
in Provider (at src/index.js:26)

import React, { Component } from 'react';
import Input from '../../components/Input/input';
import Button from '../../components/Button/button';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import * as service from '../../services/AuthService';

 class Auth extends Component {
     state = {
        controls: {
            username: {
               //..
            },
            password: {
               //..
                },
                valid: false,
                touched: false
            }
        }
    }

    componentDidMount () {
        if ( this.props.isAuthenticated && this.props.authRedirectPath !== '/' ) {
            this.props.onSetAuthRedirectPath('/home');
        }
    }


    handleSubmit=(event)=> {
        event.preventDefault();
        this.props.auth(this.state.controls.username.value,this.state.controls.password.value)
       
    }
    render() {

        let errorMessage = null;
        let button= button=<Button btnType="Success">Login</Button>
        let authRedirect = null;
        if (this.props.isAuthenticated) {
            **authRedirect = <Redirect to={this.props.authRedirectPath}/>** //line 101
        }
        return (
        <div>
            {authRedirect}
                        <form onSubmit={this.handleSubmit}>
                           {form}
                        {button}
                        </form>
              
            </div>
        )
    }
}

export default connect( mapStateToProps, mapDispatchToProps )( Auth );

【问题讨论】：

哥们，你确定this.props.authRedirectPath不是未定义的吗？
好吧，有时问题会退回到您在其中呈现 Auth.js 的组件，向我们展示 App.js
您的代码似乎没有包含您在 componentDidUpdate 或 componentWillUpdate 中更新状态的位置，但为什么不构建一个包含所有状态更新的对象，然后只调用一次 setState？跨度>
class App extends Component { render() { if ( this.state.isAuthenticated ) { routes = ( <Layout> <Switch> <Route path="/home" component={Home} /> <Redirect to="/auth" /> </Switch> </Layout> ); } return ( <div className='App'> {routes} </div> ); } } const mapStateToProps = state => { return { isAuthenticated: state.isAuthenticated }; };
@MikeFeltman 是的，我正在使用 redux 商店来管理我的大部分状态。因为在这个组件中使用了 isAuthenticated。我在那里初始化它并使用 MapStatetoProps

标签： javascript reactjs

【解决方案1】：

您如何检查身份验证？

最好在 redux-store 中初始化 isAuthenticated，这样你就可以在渲染之前在组件中全局使用它

所以，而不是

if (this.state.isAuthenticated) {routes=<div>..</div>}

试试

if (this.props.isAuthenticated{routes=<div>..</div>}

实例属性

道具

this.props 包含由调用者定义的道具这个组件。有关 props 的介绍，请参阅组件和 Props。

状态

this.state 包含特定于该组件的数据，这些数据可能随着时间的推移而变化。状态是用户定义的，它应该是一个普通的 JavaScript 对象。

有关状态的详细信息，请参阅状态和生命周期。 React.Component Lifecycle

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。

另外，确保 mapStateToProps 指向你的 reducer

return {isAuthenticated : state.{reducer}.isAuthenticated}

【讨论】：