在 React.js 的功能組件中首次渲染之前調用 api

Question

如果我想在第一次渲染組件后調用 API，我知道我們有useEffect鈎子來調用 API 方法。 （我只是在談論功能組件。沒有 class 組件）。

有什么辦法，我可以在我的組件第一次呈現之前調用 API。

這個問題的原因是，如果某些 UI 部分依賴於 API，我也不想在第一次渲染時向用戶顯示任何不完整的信息，一旦我從 API 獲取數據，這些信息就會改變。這似乎是用戶界面的糟糕體驗。

編輯：我得到了一些使用 useLayoutEffect 或任何可消耗標志來檢查它是否被渲染的建議。 我已經檢查過 useLayoutEffect 不起作用，並且通過使用 consumable 標志，我們只會增加復雜性。

我們有更好的方法嗎？

Answer 1

我認為useLayoutEffect可以用於這樣的事情，通過傳入一個空數組作為第二個參數。 useLayoutEffect(() => {...}, []);

在 useLayoutEffect 中安排的更新將在瀏覽器有機會繪制之前同步刷新。

盡管您始終可以在父組件中獲取數據並將其作為道具傳遞。 或者 - 如果你不介意它現在是一個實驗性功能 - React Suspense正在嘗試解決這個確切的問題。

Answer 2

在從同一組件渲染組件之前，沒有正確的方法可以調用 API。

您可能更喜歡在父組件中調用 API 並僅在有可消費數據時才呈現表示組件。

這種情況的另一種解決方法是在組件內保留consumable標志，在useEffect內發出請求，不渲染任何內容或某種加載器，並且僅在請求成功完成時渲染某些內容。

Answer 3

在調用 api 時，它在第一次渲染時沒有准確響應，但在第二次被擊中時給出准確響應

Answer 4

您可以先有條件地渲染微調器或加載組件（例如 isLoading）：

if(isLoading) return <Spinner />

例如，在狀態 200 上將 api 調用設置 (isLoading) 為 false。

Answer 5

剛剛遇到一些事情，這可能會在將來幫助某人。 所以我們可以使用一些庫，但我在這里要提到的具體庫是 React Query

React 查詢完全符合我們想要實現的目標，像useQuery這樣的鈎子會在渲染開始時立即獲取數據，因此您不必等到 React 加載整個組件，如下所示

// with react query
const { status, data, error, isFetching } = useQuery(
  ['data'],
  async () => {
    const data = await (
      await fetch(`${API_BASE_URL}/data`)
    ).json()
    return data
  }
)


// without react query
useEffect(() => {
  try {
    setLoading(true)(async () => {
      const data = await (await fetch(`${API_BASE_URL}/data`)).json();
      setData(data);
    })();
  } catch (error) {
    setError(error);
  } finally {
    setLoading(false);
  }
}, []);

如果您想閱讀，這是文章鏈接