componentDidUpdate

componentDidUpdate – метод, который вызывается при обновлении и перерисовке компоненты.

Примеры применения

Например, этим методо можно отлавливать изменения в старом стейте либо пропсах и новом стейте либо пропсах, что и вызвало обновление компоненты.

class NameClassComponent extends React.Component {

   state = {...}
   ...
   componentDidUpdate (prevProps, prevState) {  //тут будут старые пропсы и стейт
      let a = this.state; //придет новый стетй
      let b = this.props; //придут новые пропсы
      console.log("componentDidUpdate")
    }
  render() {
  return  ()
  }

setState внутри componentDidUpdate

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

componentDidUpdate (prevProps, prevState) {
  if (prevProps.status != this.props.status) {
    this.setState({status: this.props.status}); 
  }
}

В этом примере выше, если пришедший через пропсы статус из сейта отличается от статуса из локальных пропсов классовой компоненты, то он будет заменен. В данном случае это было нужно для того, чтобы при изменении статуса в соц. сети (при двойном клике он превращался в input) оставался для изменения полученый из пропсов текст, а не превращался сразу в пустую строку, которая хранилась в локальном стейте.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *