реагировать setState интервал - PullRequest
Новая
       8

реагировать setState интервал

0 голосов
/ 14 мая 2018

Я использую setState(), чтобы обновить значок, отображающий количество непрочитанных сообщений, которые есть у пользователя: 

updateUnread(){
  this.setState({
    unreadCount: Math.floor(Math.random() * 100)
  });
}

render(){
  setInterval(() => this.updateUnread(), 2000);

  return (
    <div className="wrapper">
      <Messages unreadCount={this.state.unreadCount} />
    </div>
  );
}

Тем не менее, он продолжает мерцать между цифрами, как вы можете видеть в этом видео . Я не уверен, почему это так, поскольку я довольно новичок в React, но я думаю, что, возможно, новый интервал создается каждый раз, когда он обновляется. Если это так, то как мне это сделать?

И да, я знаю, что здесь вводятся только случайные числа, это всего лишь развитие:)

1 Ответ

0 голосов
/ 14 мая 2018

Установите интервал в componentDidMount метод жизненного цикла и убедитесь, что вы НЕ обновляете состояние напрямую с помощью метода рендеринга.

Обновление состояния с помощью метода render являетсяплохая практика.Это может привести к снижению производительности и бесконечности цикла.

Проблема в вашем случае заключается в том, что при каждом повторном отображении вы устанавливаете новый интервал, который приведет к бесконечности.

Вот какВы можете сделать это: 

componentDidMount() {
  const intervalId = setInterval(() => this.updateUnread(), 2000);
  this.setState({ intervalId })
}

componentWillUnmount() {
   // Make sure to clear the interval, on unmount
   clearInterval(this.state.intervalId);
}

updateUnread(){
  this.setState({
    unreadCount: Math.floor(Math.random() * 100)
  });
}

render(){

  return (
    <div className="wrapper">
      <Messages unreadCount={this.state.unreadCount} />
    </div>
  );
}
...