javascript - 未捕获的不变违反: Maximum update depth exceeded

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

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

控制台输出:

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 );

最佳答案

您如何检查身份验证？

最好在redux-store中对isAuthenticated进行初始化，以便在渲染之前可以在组件中全局使用它

所以，代替
if (this.state.isAuthenticated) {routes=<div>..</div>}
尝试
if (this.props.isAuthenticated{routes=<div>..</div>}
实例属性

Prop



状态



有关状态的更多信息，请参见状态和生命周期。
React.Component Lifecycle

切勿直接更改this.state，因为之后调用setState()可能会替换您所做的更改。将此this.state视为不可变的。

此外，请确保mapStateToProps指向您的reducer
return {isAuthenticated : state. {reducer} .isAuthenticated}

关于javascript - 未捕获的不变违反: Maximum update depth exceeded，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54790781/