Question

我使用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>
  );
}

但是，它会在数字之间保持闪烁，正如您在this video中看到的那样。我不确定为什么会这样，因为我对React很新，但我认为每次更新时都可能会创建一个新的间隔。如果是这种情况，我该怎么做呢？

是的，我知道它只是随机数放在那里，这只是发展：）

Answer 1

在componentDidMount生命周期方法中设置间隔，并确保 NOT 直接通过渲染方法更新状态。

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

Answer 2

问题在于setInterval。每次调用render时，都会调用一个新的setInterval而不取消前一个setInterval。请改用setTimeout。

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

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

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

如果您使用setInterval，请确保在组件装载生命周期事件中调用它并在卸载事件中取消它。

反应setState间隔

2 个答案: