Как изменить код, чтобы не появлялась ошибка?

Question

[Nikita Gimon]

componentWillReceiveProps = nextProps => {
        if(nextProps.auth.isAuthenticated){
            this.props.history.push('/dashboard')
        }
        if(nextProps.errors){
            this.setState({
                errors: nextProps.errors
            })
        }
    };

появляется данная ошибка, прошу помочь;
×
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

[Антон Спирин]

Вы по приходу свойства error обновляете компонент в бесконечном цикле. Сам метод componentWillReceiveProps не рекомендован к использованию.
Не ясно зачем вам писать каждое новое значение свойства в одноименный state, если можно использовать напрямую?
Решение:

static getDerivedStateFromProps(props, state) {
  if (props.message) {
    return { message: props.message };
  }
}

Comments

[Nikita Gimon]

Большое спасибо!
Даже если закомментировать часть кода, где меняется Стэйт, все равно появляется ошибка
Может ли проблема быть связана с использованием componentWillReceiveProps?

[Антон Спирин]

Nikita Gimon, нет. Все гораздо проще.

componentWillReceiveProps(nextProps) { // ( 1 )
  if(nextProps.errors) { // ( 2 )
    this.setState({  // ( 3 )
      errors: nextProps.errors,
    });
  }
}

1. - componentWillReceiveProps вызывается при обновлении компонента.
2. - условие становится истинно после того как приходит свойство errors
3. - вызов setState инициирует обновление компонента (!!!)

Вы вызываете setState в componentWillReceiveProps и инициируете бесконечный цикл обновлений, так как nextProps.errors после прихода ошибки всегда возвращает истину в условии.