代码之家 › 专栏 › 技术社区 › Barry Michael Doyle

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

setstate setinterval settimeout memory-leaks reactjs

Barry Michael Doyle · 技术社区 · 6 年前

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()

1 回复 | 直到 6 年前

Clément Prévost 6 年前

你需要打电话给 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);
}

推荐文章