Question

我有一个React组件，该组件以倒数计时器开始，当按下按钮或倒数到零时，该组件将被卸载。它是这样实现的：

state = {
  counter: 60,
};

componentWillMount() {
  this.doCountDown();
}

doCountDown() {
  if (this.state.counter < 1) {
    return this.props.tryAgain();
  }
  this.setState(prevState => ({ counter: prevState.counter - 1 }));
  setTimeout(() => this.doCountDown(), 1000);
}

这不是Unmounting a Component with a SetInterval in React的副本。

在我的情况下，我正在执行一个递归事件，因此无法像提到的链接中的示例一样清除间隔。

任何人都对做什么有任何想法？

有关更多说明：this.props.tryAgain()会将状态更改为更高，导致该组件卸下。发生这种情况时，由于超时，当组件已卸载时，状态仍会尝试更改。这表明存在内存泄漏，是不正确的做法。因此，我正在努力寻找一种好的方法来防止这种情况的发生。

Answer 1

您需要在卸载时调用clearInterval方法的调用：

componentWillUnmount() {
    clearInterval(this.timeout)
}


doCountDown() {
    if (this.state.counter < 1) {
        return this.props.tryAgain();
    }
    this.setState(prevState => ({ counter: prevState.counter - 1 }));
    this.timeout = setTimeout(() => this.doCountDown(), 1000);
}

如何按照设置的间隔处理卸载组件以避免内存泄漏

1 个答案: