导航后不调用`componentDidMount()`函数

Question

我正在使用stackNavigator 在屏幕之间导航。在我的第二个活动中，我在 componentDidMount() 函数中调用了两个 API。当我第一次加载它时，它会成功加载。然后我按返回按钮返回第一个活动。然后，如果我再次进行第二个活动，则不会调用 API，并且会出现渲染错误。我无法为此找到任何解决方案。任何建议将不胜感激。

Answer 1

我遇到过这个问题，问题是当你导航一个页面时，第一次调用构造函数，componentWillmount，render componentDidmount， 但是在第二次导航到同一页面时它只调用渲染，所以如果你从 componentDidmount 进行任何 API 调用或其他操作，它不会被调用，

还有 componentWillunmount 从未调用过。

你可以使用这个方法，如果你使用 react-navigation 5.x 和类组件，它可以解决你的问题。

为每个类组件页面添加此方法并从构造函数调用此方法一次

constructor(props) {
    super(props);
    
    this.state = {
        ...
    };
    ...
    this.navigationEventListener(); // call the function
 }



navigationEventListener = () => { // add this function
        let i = 0;
        const initialState = this.state;
        this.props.navigation.addListener('focus', () => {
            if (i > 0) {
                this.setState(initialState, () => {
                    //this.UNSAFE_componentWillMount(); // call componentWillMount 
                    this.componentDidMount(); // call componentDidMount
                });
            }
        });
        this.props.navigation.addListener('blur', () => {
            this.componentWillUnmount();  //call componentWillUnmount
            ++i;
        });
    }

Answer 2

https://reactnavigation.org/docs/navigation-events/

useEffect(() => {       
            
    const unsubscribe = props.navigation.addListener('focus', () => {
        // do something
        // Your apiCall();
    });

return unsubscribe;
    
}, [props.navigation]);

Answer 3

2020 年解决方案 / React Navigation v5

在屏幕的 ComponentDidMount 中

componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      console.log('Screen.js focused')
    });
}

https://reactnavigation.org/docs/navigation-events/

或者：将 addListener 方法放在构造函数中，以防止重复调用

Answer 4

//na pagina que você quer voltar
import {NavigationEvents} from 'react-navigation';

async atualizarEstado() {
  this.props.navigation.setParams({
  number: await AsyncStorage.getItem('count'),
});}

render() {
return (
  <View style={styles.container}>
    <NavigationEvents onDidFocus={() => this.atualizarEstado()} />
  </View>
);
}

Answer 5

根据react-navigation docs我们可以如下使用

componentDidMount () {
  this.unsubscribe= this.props.navigation.addListener('focus', () => {
    //Will execute when screen is focused
  })
}

componentWillUnmount () {
  this.unsubscribe()
}

与 vitosorriso 的回答类似，但应根据文档将 didFocus 更改为焦点

Answer 6

React-navigation 文档explicitly described this case：

考虑一个带有屏幕 A 和 B 的堆栈导航器。导航到 A、它的componentDidMount被调用。当推 B 时，它的 componentDidMount 也被调用，但 A 仍然安装在堆栈上 因此它的 componentWillUnmount 不会被调用。

从B回到A时，B的componentWillUnmount被调用，但是 A 的 componentDidMount 不是因为 A 保持整个挂载 时间。

现在有 3 个解决方案：

订阅生命周期事件

...

React Navigation 向订阅的屏幕组件发出事件 他们。您可以订阅四种不同的事件： willFocus、willBlur、didFocus 和 didBlur。在 API 参考。

withNavigationFocus 可能涵盖您的许多用例 高阶组件、<NavigationEvents /> 组件或 useFocusState钩子。

1. withNavigationFocus higher-order-component
2. <NavigationEvents /> component
3. useFocusState hook（已弃用）

withNavigationFocus 高阶分量

import React from 'react';
import { Text } from 'react-native';
import { withNavigationFocus } from 'react-navigation';

class FocusStateLabel extends React.Component {
  render() {
    return <Text>{this.props.isFocused ? 'Focused' : 'Not focused'}</Text>;
  }
}

// withNavigationFocus returns a component that wraps FocusStateLabel and passes
// in the navigation prop
export default withNavigationFocus(FocusStateLabel);

<NavigationEvents /> 组件

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const MyScreen = () => (
  <View>
    <NavigationEvents
      onWillFocus={payload => console.log('will focus', payload)}
      onDidFocus={payload => console.log('did focus', payload)}
      onWillBlur={payload => console.log('will blur', payload)}
      onDidBlur={payload => console.log('did blur', payload)}
    />
    {/*
      Your view code
    */}
  </View>
);

export default MyScreen;

useFocusState 挂钩

首先安装库yarn add react-navigation-hooks

import { useNavigation, useNavigationParam, ... } from 'react-navigation-hooks'

function MyScreen() {   const focusState = useFocusState();   return <Text>{focusState.isFocused ? 'Focused' : 'Not Focused'}</Text>; }

这是我的个人解决方案，仅在从您的 API 获取数据时才使用 onDidFocus() 和 onWillFocus() 呈现：

import React, { PureComponent } from "react";
import { View } from "react-native";
import { NavigationEvents } from "react-navigation";

class MyScreen extends PureComponent {
  state = {
    loading: true
  };

  componentDidMount() {
    this._doApiCall();
  }

  _doApiCall = () => {
    myApiCall().then(() => {
      /* Do whatever you need */
    }).finally(() => this.setState({loading: false}));
  };

  render() {
    return (
      <View>
        <NavigationEvents 
              onDidFocus={this._doApiCall} 
              onWillFocus={() => this.setState({loading: true})}
        />
        {!this.state.loading && /*
        Your view code
        */}
      </View>
    );
  }
}

export default MyScreen;

Answer 7

如果使用 NavigationEvents 组件的赞成语法不起作用，您可以尝试以下操作：

// no need to import anything more

// define a separate function to get triggered on focus
onFocusFunction = () => {
  // do some stuff on every screen focus
}

// add a focus listener onDidMount
async componentDidMount () {
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    this.onFocusFunction()
  })
}

// and don't forget to remove the listener
componentWillUnmount () {
  this.focusListener.remove()
}

Answer 8

如果有人在 2019 年来到这里，试试这个：

import {NavigationEvents} from 'react-navigation';

将组件添加到您的渲染中：

<NavigationEvents onDidFocus={() => console.log('I am triggered')} />

现在，尽管来自 goBack() 或导航，但每次页面获得焦点时都会触发此 onDidFocus 事件。

Answer 9

您希望在每次使用 drawernavigator 或 stacknavigator 导航到组件后执行某些操作；为此，NavigationEvents 比 componentDidMount 更适合。

import {NavigationEvents} from "react-navigation";
<NavigationEvents onDidFocus={()=>alert("Hello, I'm focused!")} />

注意：如果您想在每次使用抽屉导航或堆栈导航关注组件后执行任务，那么使用NavigationEvents 是更好的主意。但是，如果您想执行一次任务，则需要使用 componenetDidMount。

Answer 10

即使您在屏幕之间导航，React-navigation 也会保持组件挂载。您可以使用该组件对这些事件做出反应：

<NavigationEvents
  onDidFocus={() => console.log('hello world')}
/>

关于这个组件的更多信息here。

Answer 11

在 React 中，仅在安装组件时才调用 componentDidMount。我认为您要做的是在返回 StackNavigator 时调用您的 API。当您在父屏幕上调用导航时，您可以将回调函数作为参数传递：

  navigate("Screen", {
     onNavigateBack: this.handleOnNavigateBack
  }); 
  handleOnNavigateBack = () => {//do something};

在子屏幕上

this.props.navigation.state.params.onNavigateBack();
this.props.navigation.goBack();