在 React 中使用 useEffect 取得數據

在 React 中使用 useEffect 取得數據

在 React 中，useEffect 鉤子通常用於在功能元件中執行副作用。從 API 或伺服器取得資料是最常見的副作用之一，而 useEffect 可以輕鬆管理元件中的資料擷取。以下是如何在 React 功能元件中使用 useEffect 取得資料的詳細說明和範例。

---

1.基本設定

要使用 useEffect 取得數據，通常使用下列模式：

• 使用 useEffect 在元件掛載或更新時觸發 fetch 請求。
• 使用 useState 掛鉤將取得的資料儲存在組件的狀態中。
• 處理載入和錯誤狀態以改善使用者體驗。

---

2.使用 useEffect 取得資料的範例

以下範例示範如何使用 useEffect 和 useState 從 API 取得資料：

---

3.代碼細目：

• 狀態變數：

  • data：成功檢索後儲存所取得的資料。
  • 載入：一個布林狀態，用於追蹤資料是否仍在取得中。
  • error：儲存在取得過程中發生的任何錯誤訊息。

• useEffect Hook：

  • 我們在 useEffect 掛鉤中定義一個 非同步 函數 fetchData。
  • fetchData 在元件掛載時立即調用，因為依賴陣列 [] 為空。
  • 在 fetchData 內部，我們使用 fetch() 方法進行 API 呼叫。取得資料後，我們檢查錯誤（例如，非 200 回應）並相應更新狀態。

• 載入與錯誤處理：

  • 當取得請求正在進行時，元件最初呈現「正在載入...」訊息。
  • 如果在取得過程中發生錯誤，則會顯示錯誤訊息。
  • 資料取得成功後，會顯示在清單中。

---

4.需要記住的重點：

• useEffect 中的非同步函數：

  • useEffect 本身無法標記為非同步，但您可以在效果內定義非同步函數並呼叫它。

• 空依賴數組 ([]):

  • 當依賴陣列為空時，此效果僅在初始渲染後執行一次，模仿類別元件中 componentDidMount 的行為。

• 錯誤處理：

  • 處理錯誤以確保應用程式在取得失敗時不會崩潰或出現意外行為非常重要。

• 狀態管理：

  • 使用 useState 來管理載入、資料和錯誤狀態，可以輕鬆相應地管理和顯示 UI。

---

5.用於資料取得的 useEffect 的常見模式

點選按鈕取得資料（手動觸發效果）

有時，您可能不想在組件安裝時獲取數據，而是希望基於用戶交互（例如單擊按鈕）獲取數據。在這種情況下，您可以透過從事件處理程序更新狀態變數來觸發 useEffect。

在此範例中：

• 只有在點擊按鈕後才會取得資料（setFetchDataFlag(true)）。
• useEffect 監聽 fetchDataFlag 狀態的變化，並在更新時觸發 fetch。

---

6.結論

在 React 中使用 useEffect 取得資料是一種高效、乾淨的管理副作用的方法。透過將其與 useState 結合，您可以管理功能元件中的資料擷取、載入狀態和錯誤處理。請務必記住處理錯誤和邊緣情況，以確保您的應用程式提供良好的使用者體驗。

以上是在 React 中使用 useEffect 取得數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！