Question

我已经使用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 />
}

有人可以让我知道如何销毁电话吗？

Answer 1

componentWillUnmount()仅在从DOM中删除组件时才调用，如the docs中所述：

componentWillUnmount（）在卸载和销毁组件之前立即被调用。

因此，单击按钮不会调用您的clearInterval()。您可以在changeSortOrder()调用中清除间隔。

旁注：

构造函数是唯一应直接分配this.state的地方。在所有其他方法中，您需要使用this.setState（）。（请参阅constructor docs）

无论componentWillUnmount为何，都将调用组件内部的setTimeout

1 个答案: