多次加载组件时如何进行api调用答案

【问题标题】：How to make api calls when component is loaded multiple times多次加载组件时如何进行api调用
【发布时间】：2020-01-02 10:43:39
【问题描述】：

每次用户浏览使用 expo 构建的 react 本机应用程序的产品屏幕时，我都需要获取产品。我发现组件生命周期钩子：componentDidMount 只被调用一次。这是一个问题，因为如果产品在后端/API 上更新，如果用户再次访问产品页面时没有再次调用 componentDidMount，他们将看不到最新产品，这违背了应用程序的目的。我该如何处理？谢谢

【问题讨论】：

在我看来，每次渲染获取数据会导致应用运行缓慢，最好在该产品页面中添加一个 refreshControl，以便用户可以通过获取数据滚动刷新跨度>
有一个用例，我需要每天从后端获取价格设置的单个产品。该应用程序是一个燃气销售应用程序，气瓶尺寸的价格会发生变化，我希望每次使用导航到订单页面时都显示更新的产品。你认为什么是好的方法？谢谢
对于单个产品页面，我认为您可以继续使用每次加载时呈现的方法。我上面的评论是关于产品列表页面的
好的，您能分享一个始终显示最新产品详细信息的方法吗？使用 componentDidMount 获取产品详细信息似乎只工作一次。我的想法是，由于组件已安装，因此再次触发该方法是没有意义的。你觉得呢？
在导航中添加回调函数

标签： react-native fetch-api redux-thunk

【解决方案1】：

使用componentDidUpdate() 方法。这将在render() 方法被触发之前自动执行。

请阅读this了解react-native的生命周期。

像这样调用componentDidUpdate()内部的函数

componentDidMount() { this.loadInitialState(); }

然后进行 API 调用并在 loadInitialState() 函数中设置状态。希望这会奏效

希望对您有所帮助。如有疑问，请随意。

【讨论】：

我已经尝试过该方法，该方法位于组件构造函数和渲染之间，并且不是每次都调用一次。我需要一个像渲染方法一样每次调用的方法
我看到它在您打开页面后被调用，如果我再次导航到该页面，它不会被调用。
谢谢，它成功了，但我不能在这里调用 setState 或调度操作。我的用例是每次用户导航到该订单产品页面时都能够调用获取和更新状态，以便用户看到后端或 API 上设置的最新产品数据。
所以你也可以在这个方法中设置状态，它会在每次这个函数渲染时更新你的状态。
如果对您有帮助，请打绿勾。谢谢

【解决方案2】：

您可以添加导航监听器：Subscribe to updates to navigation lifecycle

this.props.navigation.addListener(
  'didFocus',
  () => {
    this.getData()
  }
)

【讨论】：

【解决方案3】：

使用 WebSocket 进行实时应用

【讨论】：