当我的 React 应用程序中的路由更改时，我 clearInterval() 和应用程序中断 [英] when route changes in my React app I clearInterval() and app breaks

问题描述

我正在使用 React-router-dom 开发 React 应用.

I'm working on a React app with React-router-dom.

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

I have a menu with some react-router-dom's <NavLink />, each one takes me to a different route.

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

In my main route path="/" I have chartComponent with a chart that keeps on changing with random data, like this: this.chartChangeId = setInterval(()=> this.setState(data), 1500).

在我添加这个之前:

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

对于chartComponent，我的应用程序没有中断，但出现此错误:

To chartComponent my app didn't break, but I got this error:

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

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.

所以我将其添加到生命周期中.

so I added this to the life cycle.

但是现在，当我单击 <NavLink/> 之一转到另一条路线时，我的应用程序中断，并且出现此错误:

But now, when I click on one of the <NavLink /> to go to a different route my app breaks, and I get this error:

未捕获的类型错误: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)

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)

我做错了吗?

推荐答案

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

()=> this.setState(data) is executing even if you clear interval because its already in memory and its in async stack. What you need to do is check if the component exists and only then update state. The simplest thing what to do is

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

However this is more of antipatern. Proper way would be not to use setState in Ajax at all. https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

这篇关于当我的 React 应用程序中的路由更改时，我 clearInterval() 和应用程序中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！