reactjs - React Native 在打开时刷新一个组件

Question

我有我的堆栈导航器 -

export const Routes = StackNavigator({
    Login: {
        screen: Login,
    },
    Flights: {
        screen: Flights,   
    },
    Payment: {
        screen: Payment,
    }
}, {
        initialRouteName: 'Login'
    }
)

流程是登录 -> 航类 -> 付款。

“航类”屏幕调用 API 来获取航类。我有在 componentDidMount() 中调用航类的逻辑。但是，当我从付款返回到航类时，我想再次调用 API。

我的问题是如何在每次打开航类屏幕时创建此 API 调用逻辑？

Answer 1

除了在 componentDidMount 中获取数据之外，您还可以为 didFocus event 创建一个监听器。 .

示例

class Flights extends React.Component {
  state = { flights: [] };

  componentDidMount() {
    this.getFlights();

    this.listener = this.props.navigation.addListener("didFocus", this.getFlights);
  }

  componentWillUnmount() {
    this.listener.remove();
  }

  getFlights = () => {
    getData().then(flights => {
      this.setState({ flights });
    });
  };

  render() {
    // ...
  }
}