Question

现在我有以下内容：

componentWillUnmount() { console.log("Leaving"); this._isMounted = false; }
componentDidMount() { this._isMounted = true; }

我有一个类似的功能：

this.saveSomething(this.state.data).then((response) => {

  if(response !== null) {

    console.log(this._isMounted);

    if(this._isMounted) {
      Alert.alert(
        'Success!', 'It was saved',
        [
          {text: 'Go Home', style: 'cancel', onPress: () => {
            //navigate the app home
            this.props.navigation.navigate('Home');
          }},
          {text: 'Stay Here'},
          {text: 'Do something else', onPress: () => {
            //stuff that they need to be on the page to do
          }}
        ]
      );
    }
  }
})

如果此功能运行并且我用react-navigation单击后退按钮，则componentWillUnmount()运行，但是saveSomething完成后，如果我不在页面上，则仍会弹出我的警报框

有人知道为什么会这样吗？

Answer 1

位于堆栈下方的组件可以接收对诸如componentWillReceiveProps之类的方法的调用，并且即使它们未显示也可以呈现。

我认为最好的方法是在componentDidMount内处理isMounted并添加一个导航侦听器，例如didBlur会在屏幕没有聚焦时触发：

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
   payload => {
      this._isMounted = false;
   }
);

并确保已删除componentWillUnmount内部的侦听器。

在此处了解有关导航生命周期的更多信息：https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

Answer 2

您可以使用isFocused道具的navigation方法来检查屏幕是否聚焦。

https://reactnavigation.org/docs/en/navigation-prop.html

离开页面时，React Native无法运行功能

2 个答案: