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);
}

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

1 个答案: