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

【问题标题】：when route changes in my React app I clearInterval() and app breaks当我的 React 应用程序中的路线发生变化时，我 clearInterval() 和应用程序中断
【发布时间】：2017-12-21 11:09:49
【问题描述】：

我正在使用 React-router-dom 开发一个 React 应用。

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

在我的主要路线 path="/" 我有 chartComponent 和一个随着随机数据不断变化的图表，如下所示：this.chartChangeId = setInterval(()=> this.setState(data), 1500)。

在我添加之前：

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

到 chartComponent 我的应用没有崩溃，但我收到了这个错误：

警告：只能更新已安装或已安装的组件。这通常意味着您在未安装的组件上调用了 setState、replaceState 或 forceUpdate。这是一个无操作。请检查 BrainWaveChart 组件的代码。

所以我将它添加到生命周期中。

但是现在，当我点击<NavLink /> 之一以转到另一条路线时，我的应用程序中断，我收到此错误：

未捕获的类型错误：timeout.close 不是函数在exports.clearTimeout.exports.clearInterval (main.js:14) 在 BrainWaveChart.componentWillUnmount (brainwaveChart.jsx:116) 在 callComponentWillUnmountWithTimer (vendor_f02cab182c1842c98837.js:45235) 在 HTMLUnknownElement.callCallback (vendor_f02cab182c1842c98837.js:37015) 在 Object.invokeGuardedCallbackDev (vendor_f02cab182c1842c98837.js:37054) 在 invokeGuardedCallback (vendor_f02cab182c1842c98837.js:36911) 在safelyCallComponentWillUnmount (vendor_f02cab182c1842c98837.js:45242) 在 commitUnmount (vendor_f02cab182c1842c98837.js:45368) 在 commitNestedUnmounts (vendor_f02cab182c1842c98837.js:45404) 在 unmountHostComponents (vendor_f02cab182c1842c98837.js:45687)

我做错了吗？

【问题讨论】：

标签： javascript reactjs setinterval react-router-dom

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：

@AjayGupta，如果您阅读了我分享的链接中的主题，您就会明白这是一个特定于 IDE 的问题，而不是框架问题。