首頁 >web前端 >js教程 >在 React 中使用 `useEffect` 從 API 取得資料的不同方法

在 React 中使用 `useEffect` 從 API 取得資料的不同方法

Linda Hamilton
Linda Hamilton原創
2025-01-10 22:33:43846瀏覽

Different Ways to Fetch Data from APIs Using `useEffect` in React

在 React 中,useEffect 鉤子旨在運行副作用,例如在元件渲染時獲取資料。雖然在這種特定情況下您無法避免呼叫 fetchData 函數(因為您需要一種方法來啟動 API 請求),但您可以根據您的要求對其進行簡化或抽象化。

方法

1.內嵌取得邏輯

您可以將 fetchData 直接內聯到 useEffect 掛鉤內,而不是將 fetchData 定義為單獨的函數。

useEffect(() => {
    const fetchData = async () => {
        setLoading(true);
        try {
            const response = await fetch('http://127.0.0.1:5000/indicators_signals');
            const data = await response.json();
            setData(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setLoading(false);
        }
    };

    fetchData();
}, []); // Empty dependency array ensures this runs only once

雖然這種方法消除了對 fetchData 的明確調用,但邏輯仍然作為內聯異步函數存在。


2.自動呼叫API,無需明確函數

您可以在 useEffect 中直接將 fetch 操作作為 IIFE(立即呼叫函數表達式)執行。這消除了對像 fetchData 這樣的命名函數的需要。

useEffect(() => {
    (async () => {
        setLoading(true);
        try {
            const response = await fetch('http://127.0.0.1:5000/indicators_signals');
            const data = await response.json();
            setData(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setLoading(false);
        }
    })(); // The function is invoked immediately
}, []);

這樣,就可以直接執行取得邏輯,而無需明確呼叫命名函數。


3.使用自訂鉤子

您可以將獲取邏輯抽象化為自訂鉤子來封裝功能並保持元件更清晰。

自訂掛鉤:useFetch
import { useState, useEffect } from 'react';

const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        (async () => {
            try {
                const response = await fetch(url);
                const result = await response.json();
                setData(result);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        })();
    }, [url]);

    return { data, loading, error };
};

export default useFetch;
在元件中使用 Hook
import useFetch from './hooks/useFetch';

const MyComponent = () => {
    const { data, loading, error } = useFetch('http://127.0.0.1:5000/indicators_signals');

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

    return (
        <div>
            <h1>Data from API:</h1>
            <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}
); };

4.在更高層級的元件中預取資料

不要在需要的元件內部獲取數據,而是在父級或更高級元件中獲取數據並將其作為 props 傳遞。

const App = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        (async () => {
            try {
                const response = await fetch('http://127.0.0.1:5000/indicators_signals');
                const result = await response.json();
                setData(result);
            } finally {
                setLoading(false);
            }
        })();
    }, []);

    if (loading) return <p>Loading...</p>;

    return <ChildComponent data={data} />;
};

const ChildComponent = ({ data }) => (
    <div>
        <h1>Data:</h1>
        <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}
);

要點

以上是在 React 中使用 `useEffect` 從 API 取得資料的不同方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

for while using function this
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:乾淨的程式碼:使用函數式程式設計管理副作用下一篇:乾淨的程式碼:使用函數式程式設計管理副作用

相關文章

看更多