在 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。

我確信我在這里提到的是一種簡單的實現方式。 希望這可以幫助。