React js，超过最大更新深度

Question

我遇到了一个错误：

已超过最大更新深度。这可能发生在组件 在 componentWillUpdate 内重复调用 setState 或 组件更新。 React 将嵌套更新的数量限制为 防止无限循环。

我的代码是：

class Login extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      firstName: '',
      password: '',
      isLogged: false
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChangeFirstName = this.handleChangeFirstName.bind(this);
    this.handleChangePassword = this.handleChangePassword.bind(this);
  }

  handleChangeFirstName(event) {
    this.setState({firstName: event.target.value})
  }
  handleChangePassword(event) {
    this.setState({password: event.target.value})
  }

  handleSubmit(event) {
    console.log('login');
    console.log('first name:' ,this.state.firstName);
    console.log('password:' ,this.state.password);
    this.props.loginRequest(this.state.firstName, this.state.password);
    // console.log('login',this.props)
  }

  componentDidUpdate() {
    if(this.props.request.message === 'ok'){
      console.log('ok');
      this.setState({isLogged: true});
      this.props.history.push('/');
      //path is ok!!!
      console.log('path from history: ', this.props.history);
    }
  }

  render() {
    return(
      <div>
        {this.state.isLogged ? <App />
         :
        <div className="container">
          <div className="row">
            <div className="col-sm-5 log-style">
              <div className="log-title">
                <h2>Admin Login</h2>
                <p>Please enter you login details</p>
              </div>
              <div className="row p-2">
                <input 
                  type="text" 
                  id="fname" 
                  onChange={this.handleChangeFirstName}
                  className="form-control input-sm"
                  placeholder="First name" 
                  style={{'border':'none'}} required/>
              </div>
              <div className="row p-2">
                <input 
                  type="password"
                  id="pass"
                  onChange={this.handleChangePassword}
                  className="form-control input-sm"
                  placeholder="Password" 
                  style={{'border':'none'}} required/>
              </div>
              <div className="row" style={{'marginTop':'40px'}}>
                <div className="col-sm-6" style={{'padding': '2px'}}>
                  <input type="checkbox" 
                    style={{
                     'float': 'left',
                     'marginTop': '10px',
                     'marginLeft': '13px'
                    }} />
                   <label 
                     style={{
                      'marginTop': '7px',
                      'marginLeft': '9px'
                   }}>Remember me </label>
                </div>
                <div className="col-sm-6" 
                  style={{
                   'paddingTop': '7px',
                   'textAlign': 'right'
                  }}>
                  <a href="#" 
                    style={{
                     'color': 'purple', 
                     'fontSize': '13px'
                    }}>
                    Forgot password?</a>
                </div>
              </div>

              <div className="row" style={{'justifyContent': 'center'}}>
                <div className="btn btn-sm borderBtn" 
                  style={{
                   'backgroundColor':'purple'}}
                    onClick={() => this.handleSubmit(event)}>
                  <span className="fi-account-login">Login</span>
                </div>
              </div>
            </div>
          </div>
        </div>
       }  
       </div>
    )
  }
}


const mapStateToProps = state => (
  { user: state.userReducer.user, request: state.userReducer.request }
);

const mapDispatchToProps = dispatch => 
  bindActionCreators({loginRequest}, dispatch);


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));

我有另一个使用路由器切换页面的组件，以及一个包含登录页面的邮件组件。

Answer 1

问题是每次更新组件时，您都会再次更新它而没有任何中断条件。这会创建一个无限循环。在此处更新之前，您应该检查 this.state.isLogged 是否为真：

componentDidUpdate() {
  if(this.props.request.message === 'ok'){
      console.log('ok');
      if (!this.state.isLogged) {
          this.setState({
              isLogged: true
          });
      }
      this.props.history.push('/');
      //path is ok!!!
      console.log('path from history: ', this.props.history);
  }
}

这可以防止在 isLogged 状态已经为真时更新它。