如何修复“超出最大更新深度。在 componentWillUpdate 或 componentDidUpdate 中调用 setState。” 反应错误？

Question

The code was working fine but this came out of nowhere.

I tried switching the condition over to componentDidMount but that didn't work either. Getting the error on this function.

  componentDidUpdate() {
    if (
      this.props.firebase.auth.currentUser &&
      this.props.firebase.auth.currentUser.userProfile &&
      !this.state.userProfile
    ) {
      this.setState(
        {
          userProfile: this.props.firebase.auth.currentUser.userProfile
            .userProfile
        }
      );
    }
  }

It is supposed to be redirecting the user to the nextPage but gives me an error of "Maximum update depth exceeded".

Answer 1

Why do you have.userProfile.userProfile? You're likely updating userProfile with undefined, so it's failing your .this.state.userProfile check.

I would remove the second.userProfile.

Answer 2

You're not passing prevProps to the componentDidUpdate and then using that within your conditional. Without more info about why you're using userProfile, I'd suggest doing something like below:

componentDidUpdate(prevProps){
   if(this.props.firebase.auth.currentUser === this.prevProps.firebase.auth.currentUser) {
   ///your code
}}

Your logic for the this.props.firebase.auth.currentUser.userProfile &&.this.state.userProfile seems like it should not be located in this method, as it seems redundant if you are comparing whether the currentUser is still there and the same after the component updated.