javascript - 离开页面时 React Native 不运行函数

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