Как исправить ошибку "Превышена максимальная глубина обновления. Вызов setState внутри componentWillUpdate или componentDidUpdate."ошибка в реакции?

Question

Код работал нормально, но это произошло из ниоткуда.

Я попытался переключить условие на componentDidMount, но это тоже не сработало. Получение сообщения об ошибке в этой функции.

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

Предполагается, что он перенаправляет пользователя на следующую страницу, но выдает ошибку «Превышена максимальная глубина обновления».

Answer 1

Вы не передаете prevProps на componentDidUpdate, а затем используете это в своем условном выражении. Без дополнительной информации о том, почему вы используете userProfile, я бы предложил сделать что-то вроде следующего:

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

Ваша логика для this.props.firebase.auth.currentUser.userProfile && !this.state.userProfile, похоже, не должна быть расположена в этом методе, как кажетсяизбыточно, если вы сравниваете, есть ли currentUser там же и после обновления компонента.

Answer 2

Почему у вас есть .userProfile.userProfile? Скорее всего, вы обновляете userProfile с помощью undefined, поэтому он не проходит проверку !this.state.userProfile.

Я бы удалил второй .userProfile.