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() {
    // ...
  }
}

Answer 2

使用react-navigation v5和hook可以轻松得多。您可以使用新的useFocusEffect钩子。

有时候，我们希望在屏幕聚焦时产生副作用。在旁边效果可能涉及添加事件监听器，获取数据，更新文档标题等。虽然可以使用聚焦和模糊事件，这不是很符合人体工程学。

使用@Tholle的示例：

const Flights = () => {
  useFocusEffect(
    React.useCallback(() => {
      getFlights();
    }, []),
  );

  // ...
}

https://reactnavigation.org/docs/use-focus-effect/

打开时反应本机刷新组件

2 个答案: