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

Question

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

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

在我的主要路线 path="/" 中，我有一个 chartComponent，其中的图表随随机数据不断变化，如下所示: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