this.setState не работает в componentDidUpdate

Есть некоторая проблема с этим кодом, я думаю, потому что setState не работает в этом коде.

this.setState({ 
  showTooltip: true, 
  toolTipsValue: message, 
  error: true 
})

Прежде чем нажать на кнопку

this.props.loginRes = {
  responseCode: 1, 
  result: {}
}

После нажатия на кнопку

prevProps.loginRes = {
  responseCode: 1, 
  result: {}
}

this.props.loginRes = {
  responseCode: 1,
  result: { 
    data: {}, 
    statusCode: 1, 
    statusMessage: 'Invalid email/mobile' 
  }
}

componentDidUpdate(prevProps, prevState) {
  if (this.props.loginRes !== prevProps.loginRes) {
    const message = this.props.loginRes.result.statusMessage;
    this.setState({
      showTooltip: true,
      toolTipsValue: message,
      error: true
    })
  }
}

Сообщение об ошибке Ссылка на сообщение об ошибке


reactjs javascript setstate
person Ravi Patel    schedule 20.12.2019    source источник
comment
Не используйте setState внутри componentDidUpdate, это вызовет бесконечный цикл повторного рендеринга. stackoverflow.com/questions/30528348/   -  person Loi Nguyen Huynh    schedule 20.12.2019
comment
@LoiNguyenHuynh, вы правы, но я использую условие, поэтому оно не переходит в бесконечный цикл. также я прилагаю снимок экрана с ошибкой, пожалуйста, проверьте его.   -  person Ravi Patel    schedule 20.12.2019
comment
Не могли бы вы показать мне файл Login.js, пока не вижу ничего плохого в предоставленном вами коде.   -  person Loi Nguyen Huynh    schedule 20.12.2019

Ответы (2)


arrow_upward
1
arrow_downward

В качестве дополнения к winwiz1. (То, что он говорит, верно).

Вы сравниваете два объекта в функции componentDidUpdate. Сравнение двух объектов с помощью !== не сработает. Ответ, почему это не работает, можно найти здесь: Сравнение двух объектов

Решение lodash с isEqual, пример можно найти здесь: Сравнение Деппа между двумя объектами

person Paul    schedule 20.12.2019
comment
Он сравнивает 2 объекта по !==, что всегда приводит к true, потому что это всегда разные объекты, тогда получается бесконечный цикл. Хорошая находка :)) - person Loi Nguyen Huynh; 20.12.2019

arrow_upward
1
arrow_downward

Ошибка this.setState is not a function вызвана тем, что вы не привязали обработчик onClick. В результате this указывает на объект window, а не на экземпляр вашего компонента класса React. И объект window не имеет функции setState() в качестве свойства - об этом говорит сообщение об ошибке.

Чтобы исправить эту ошибку, либо свяжите обработчик onClick в конструктор класса или переписать обработчик, используя стрелочная функция.

Использование setState внутри componentDidUpdate не должно вызывать бесконечный цикл.

person winwiz1    schedule 20.12.2019
comment
Как вы узнали, что он использовал this.setState на onClick? Я думал, что это было в componentDidUpdate - person Loi Nguyen Huynh; 20.12.2019
comment
componentDidUpdate не нуждается в привязке. Так что это должно быть где-нибудь еще - person Paul; 20.12.2019
comment
как я могу написать обработчик, используя функцию стрелки?? - person Ravi Patel; 23.12.2019
comment
Вы можете написать обработчик, используя функцию стрелки, например: handleClick = () => { console.log('Click happened'); } - person winwiz1; 24.12.2019