React - 如何等待組件道具

Question

在我的 React 應用程序中，我的應用程序組件有一個調用 API 的函數。 此功能是傳下來的子組件為道具和子組件調用此功能componentDidMount 。 當被調用的 app.js 中的函數將 API 調用的結果作為 props 傳遞回子組件時。

這一切正常，您可以在https://codesandbox.io/s/eloquent-roentgen-03dzs看到它（注意在瀏覽器中查看應用程序時，您需要將用戶名 jinky32 附加到 URL https://03dzs。 csb.app/ - 所以https://03dzs.csb.app/jinky32 ）。

但是我不想繼續進行不必要的 API 調用。 一旦組件有了他們的wantedCards和ownedCards道具，我希望他們使用它們，而不是發出新的 API 請求。

在調用loadCardData函數之前檢查數據是否已加載到這些子組件道具中的正確方法是什么？ 檢查this.props.ownedCards.length < 1是否對我不起作用

Answer 1

好的，感謝@RicardoSanchez，轉移到上下文是一個很好的選擇。 然而，根本的問題是，在我的表格組件中，我使用<a href>鏈接到其他頁面，這迫使組件重新安裝。

將其更改為<Link to=意味着狀態不會丟失（通過上下文 api 傳遞給子組件）並且我可以停止進行不必要的調用！

Answer 2

Maaaan 你做錯了，你應該使用 react-redux 和 redux persist， https://react-redux.js.org/api/hooks ， https://www.npmjs.com/package/redux-persist ，第一個（redux）將您的數據保存在單個存儲中，使用單個存儲，無需將數據作為道具傳遞，您始終保存在存儲中並從存儲中檢索。 持久化器將存儲數據保存在您的存儲中（您可以選擇會話或本地），您可以在調用 api 之前使用中間件檢查數據是否已經存在

這是一個例子。

export function callApi(payload) {
    try {
      const getProducts = (state) => state.products //access the store
      const products = yield select(getProducts)

      if(products) return;
      yield Axios.get("api/products")
    } catch (err) {
      console.log('error at sagas [getAllProducts type]', err)
    }
}

我使用傳奇作為中間件。