ReactJS - 重新渲染父亲后组件仍然存在

Question

我对组件生命周期有一些奇怪的行为。

在我的应用程序中，我有一个仪表板，里面有几个小部件。每个小部件都是一个 React 组件。

GridWidgets.jsx 是管理每个小工具的父亲。

当我切换到另一个仪表板时，GridWidgets 会重新渲染以从服务器加载该仪表板的小部件。渲染是正确的，并且渲染了新的小部件。不幸的是，以前仪表板中的旧组件仍然有效（制作东西）。

在网上搜索，我找不到任何特定的“卸载”过程，因为当一个组件重新渲染自身时，它应该删除它以前的子组件。

关于我的小部件组件唯一“奇怪”的地方是，在他们的 componentWillMount 中，我输入了以下代码：

setInterval(() => { this.internalRefresh(); this.loadData()}, this.props.widget_data.refresh * 1000);

这会启用每 x 秒自动刷新一次。 LoadData 是一个调用服务器来更新小部件数据的函数。

恐怕这个间隔会使组件无法安装。

有什么解决办法吗？

Answer 1

卸载组件时需要清除间隔。为此，您可以在 React 中使用 componentWillUnmount 生命周期方法

componentWillUnmount() {
    clearInterval(this.timer);
}
componentDidMount() {
    this.timer = setInterval(() => { 
         this.internalRefresh();
         this.loadData()
    }, this.props.widget_data.refresh * 1000);
}