Javascript 无论componentWillUnmount如何，都会调用组件内的setTimeout

我已经使用setInterval获取数据，这些数据将每30秒调用一次。下面是其中的一个片段

this.interval = setInterval(() => this.props.fetchEvents().catch((err) => {
   this.setState({ isLoadingFailed: true });
}), 30000);

现在我正在实现排序功能，当我单击“排序”按钮时，我的组件将被重新渲染。 因此，当我的组件被重新呈现时，我试图通过实现“componentWillUnmount”来破坏为获取数据而发送的调用，但它不起作用，并且只有在获取数据后才进行排序

componentWillUnmount() {
  clearInterval(this.interval);
}

分类：

changeSortOrder() {
  if (this.state.inAsc == -1) {
    this.state.inAsc = 1;
  } else {
    this.state.inAsc = -1;
  }
}

排序按钮html：

{
    this.state.group == 'admin' && this.state.inAsc == -1
      ? <Tooltip content="Click to Sort" position={Position.BOTTOM}>
        <span className="event-main-navigation-element" onClick={this.changeSortOrder.bind(this)}>
          <SortAsc className="event-main-navigation-icon" />
        </span>
      </Tooltip>
      : this.state.group == 'admin' && this.state.inAsc == 1 
      ? <Tooltip content="Click to Sort" position={Position.BOTTOM}>
      <span className="event-main-navigation-element" onClick={this.changeSortOrder.bind(this)}>
        <SortDesc className="event-main-navigation-icon" />
      </span>
    </Tooltip> : <div />
}

有人能告诉我如何销毁调用吗？

只有在从DOM中删除组件时才会调用componentWillUnmount，如中所述：

componentWillUnmount在卸载和销毁组件之前立即调用

因此，单击按钮时不会调用clearInterval。您可以清除ChangesOrder调用中的间隔

旁注：

构造函数是您应该直接分配this.state的唯一位置。在所有其他方法中，您需要改用this.setState。 看

---

问题不在于时间间隔，很可能是异步运行的this.props.fetchEvents。所以fetchEvents可能需要检查。您在哪里设置间隔？@epascarello this.props.fetchEvents正在异步运行。@SLaks我没有在任何地方设置它。仅使用它来获取数据。cWU似乎不合适；它不会因为您正在获取数据而被卸载。我不确定你到底想做什么，一旦数据被排序，就停止抓取数据？排序时清除间隔。或者设置一个标志并检查是否需要重新加载数据。注意，如果数据变化很大，30秒的帧可能是一个奇怪的UX。