当我的 React 应用程序中的路线发生变化时，我 clearInterval() 和应用程序中断

Question

我正在使用 React-router-dom.

开发 React 应用程序

我有一个菜单，里面有一些 react-router-dom 的 <NavLink />，每个都带我去不同的路线。

在我的主要路线 path="/" 中，我有 chartComponent，其中的图表随运行不断变化dom 数据，像这样：this.chartChangeId = setInterval(()=> this.setState(data), 1500).

在我添加之前：

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

至 chartComponent 我的应用程序没有中断，但出现此错误：

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Please check the code for the BrainWaveChart component.

所以我把这个加入了生命周期。

但是现在，当我点击其中一个 <NavLink /> 转到不同的路径时，我的应用程序中断了，我得到了这个错误：

Uncaught TypeError: timeout.close is not a function at exports.clearTimeout.exports.clearInterval (main.js:14) at BrainWaveChart.componentWillUnmount (brainwaveChart.jsx:116) at callComponentWillUnmountWithTimer (vendor_f02cab182c1842c98837.js:45235) at HTMLUnknownElement.callCallback (vendor_f02cab182c1842c98837.js:37015) at Object.invokeGuardedCallbackDev (vendor_f02cab182c1842c98837.js:37054) at invokeGuardedCallback (vendor_f02cab182c1842c98837.js:36911) at safelyCallComponentWillUnmount (vendor_f02cab182c1842c98837.js:45242) at commitUnmount (vendor_f02cab182c1842c98837.js:45368) at commitNestedUnmounts (vendor_f02cab182c1842c98837.js:45404) at unmountHostComponents (vendor_f02cab182c1842c98837.js:45687)

我做错了吗？

Answer 1

()=> this.setState(data) 即使您清除间隔也会执行，因为它已经在内存中并且在异步堆栈中。您需要做的是检查组件是否存在，然后才更新状态。最简单的事情就是

const {clearInterval, setInterval} = window;
class Comp extends React.Component {
  constructor(props) {
    super(props);
    this.mounted = false;
    this.interval = setInterval(() => {
      if(this.mounted) this.setState();
    })
  }
  componentWillMount() {
    this.mounted = true;
  }
  componentWillUnmount() {
    this.mounted = false;
    clearInterval(this.interval);
  }
}

然而，这更像是反模式。正确的方法是根本不在 Ajax 中使用 setState。 https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

Answer 2

您的 IDE 可能会自动为您导入 { clearInterval }，
这就是导致问题的原因。
请检查您的文件中是否有 import { clearInterval } from .... 语句，
并将其删除。
它发生在一些 IDE 中。
此 link 中提供了更多信息：
https://github.com/angular/angular/issues/12400

当我的 React 应用程序中的路线发生变化时，我 clearInterval() 和应用程序中断

when route changes in my React app I clearInterval() and app breaks

javascript

setinterval

reactjs

react-router-dom