在 React Native 中使用外部 API 渲染 Flatlist 的正确方法

Question

我创建了一个屏幕，其中包含一个带有来自外部 API 的数据源的平面列表。 我将这些数据存储在一个状态中，使用 redux 然后将数据检索到 flatlist。

我是为了从我使用 axios 的 API 中获取数据。 因此，为了向 flatlist 提供数据源，我正在获取上一个屏幕中的数据。 例如 - 我有一个按钮，按下该按钮它将导航到一个包含平面列表的新屏幕。 因此，我通过上一页按钮的 onPress 函数发布 axios 请求来获取数据。 然后将该数据存储到 redux 存储中的状态，然后将数据作为源到平面列表。

我认为这不是正确的方法吗？ 如何从同一组件上的外部 API 获取数据以及如何呈现该数据（因为在获取数据时，将呈现该组件）。 如何有效地做到这一点？

因为，如果一切都正确，如果用户转到其他屏幕并重新进入屏幕会发生什么？ 如何有效和优化地做到这一点？

我想我没有任何代码可以显示。 如果你们需要上面说的任何代码，请告诉我会更新它们。

Answer 1

您可能应该尝试使用componentDidMount来调用您的 api。 componentDidMount 仅在初始渲染发生后立即调用一次。 您提到您将数据存储在您的 redux 存储中。

您可能应该创建如下事件：

const Actions = {
  LOAD_POSTS_REQUEST: 'LOAD_POSTS_REQUEST',
  LOAD_POSTS_FAILURE: 'LOAD_POSTS_FAILURE',
  LOAD_POSTS_SUCCESS: 'LOAD_POSTS_SUCCESS',
};

const postReducer = {
      posts: [],
      isLoaded: false
};

现在，在LOAD_POSTS_SUCCESS您可以在LOAD_POSTS_SUCCESS中设置您需要的数据，并在 redux 存储中设置isLoaded状态。 现在下一次，当用户重新进入屏幕时，您可以使用state.isLoaded检查来调用 api。

我确信我在这里提到的是一种简单的实现方式。 希望这可以帮助。