在 React JS 中從 API 取得和顯示資料的指南

已發表: 2024-10-01

從 API 取得和顯示資料是現代 React 應用程式中的基本任務。隨著 React 的發展，獲取資料變得更加簡化，並提供多種方法來發出 HTTP 請求。在本指南中，我們將介紹使用 React 取得和顯示資料的步驟。

目錄

切換

設定 React 項目

在深入了解 API 取得之前，請確保您已經設定了一個 React 專案。您可以使用以下命令建立一個

  • npx create-react-app my-app
    cd my-app
    npm start

這會初始化一個新的 React 專案並運行一個開發伺服器。

️ 一步一步：在 React 中取得數據

1.建立儲存資料的狀態

使用useState掛鉤建立一個狀態變數來儲存所取得的資料。

javascript

  • const [data, setData] = useState([]);

2.使用useEffect取得API數據

React 的useEffect鉤子確保在元件安裝時取得資料。 fetch()函數用於從 API 檢索資料。

javascript

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3.顯示所獲取的數據

取得資料後，可以使用map()方法在 JSX 中呈現資料：

  • return (
    <div>
    <ul>
    {data.map(item => (
    <li key={item.id}>{item.name}</li>
    ))}
    </ul>
    </div>
    );

️ 使用axios獲取數據

儘管fetch()是原生瀏覽器 API，但許多開發人員更喜歡使用像Axios這樣的函式庫，因為它簡單且功能強大。下面是使用 Axios 的範例：

安裝 Axios ：

  • npm install axios

取得數據

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

處理邊緣情況

  • 載入狀態：在取得資料時管理載入狀態非常重要。
  • 錯誤處理：實作正確的錯誤處理可以增強使用者體驗。

例子：

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

結論

從 React 中的 API 取得和顯示資料對於建立動態 Web 應用程式至關重要。無論是使用fetch() API 還是像 Axios 這樣的函式庫，這個過程都涉及定義儲存資料的狀態、發出請求和呈現結果。透過了解這些步驟並處理載入和錯誤等邊緣情況，您可以有效地建立響應迅速、數據驅動的應用程式。

常見問題解答

1.如何設定React專案來開始取得API資料？

若要設定 React 項目，請執行以下命令：

npx create-react-app my -app
cd my -app
npm start

這將初始化專案並啟動開發伺服器。

2.如何在 React 中儲存所取得的資料？

您可以使用useState掛鉤儲存取得的資料。例子：

const [data, setData] = useState ([]);

3.當元件掛載時，如何在React中取得資料？

當元件掛載時使用useEffect hook 來取得資料：

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. React中渲染資料時使用map()方法的目的是什麼？

map()方法用於循環取得的資料數組並渲染 JSX 中的每個項目。例如：

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5.為什麼我要使用 Axios 而不是 fetch API？

許多開發人員更喜歡 Axios，因為它簡化了 HTTP 請求，提供了更多功能，並且更一致地支援舊版瀏覽器。

6.如何在我的 React 專案中安裝 Axios？

若要安裝 Axios，請執行：

npm install axios

7. React 中如何使用 Axios 取得資料？

使用 Axios，您可以像這樣取得資料：

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8.在 React 中取得資料時如何處理載入狀態？

您可以透過使用useState建立loading變數來管理載入狀態。例如：

const [loading, setLoading] = useState ( true );

useEffect ( () => {
取得（ 'https://api.example.com/data' ）
。然後（響應=>響應.json （））
。然後（數據=> {
設定數據（數據）；
設定加載（假）；
});
}, []);

9.取得資料時出現錯誤如何處理？

要處理錯誤，請定義error狀態並在請求失敗時更新它：

const [error, setError] = useState ( null );

useEffect ( () => {
取得（ 'https://api.example.com/data' ）
。捕獲（錯誤=> {
設定錯誤（錯誤）；
setLoading (假);
});
}, []);

10.為什麼處理 API 取得中的載入和錯誤等邊緣情況很重要？

處理載入和錯誤等邊緣情況可確保使用者了解資料擷取的當前狀態，並在資料檢索失敗或需要時間的情況下提供更流暢的使用者體驗。