componentWillUnmount clearInterval无法正常工作

Question

我无法停止启动的setInterval。 我想在页面更改时停止。

componentDidMount(){
      this.props.navigation.addListener('willFocus', this.load);
      this.interval = setInterval(this.load, 3000);
}

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

Answer 1

由于您没有回应，我将尝试为您提供一个应该有所帮助的解决方案。

如果您使用的是react-navigation（其他导航器也可能使用），并且使用的是bottomTabNavigator，drawerNavigator或stackNavigator（仅在某些情况下才使用最后一个） ），componentWillUnmount事件不会触发，因为屏幕不会被卸载。

要解决此问题并使用react-navigation（即使其他导航器上可能存在类似的问题），我建议使用withNavigationFocus HOC。

此HOC告诉屏幕是否是在特定时间聚焦的屏幕。

回到您的问题，要使用此HOC，可以更改以下内容：

1）删除componentWillUnmount函数，因为我们不再需要它。

2）创建一个这样写的componentDidUpdate：

componentDidUpdate=(prevProps)=>{
   if(this.props.isFocused) clearInterval(this.interval);
}

这可以解决问题。

如果您需要澄清，请告诉我！希望对您有帮助。