React で「useEffect」を使用して API からデータをフェッチするさまざまな方法-jsチュートリアル-php.cn

React で「useEffect」を使用して API からデータをフェッチするさまざまな方法

Linda Hamilton

リリース： 2025-01-10 22:33:43

オリジナル

789 人が閲覧しました

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

React では、useEffect フックは、コンポーネントのレンダリング時にデータのフェッチなどの副作用を実行するように設計されています。この特定のケースでは fetchData 関数の呼び出しを避けることはできませんが (API リクエストを開始する方法が必要なため)、要件に応じて関数を単純化または抽象化できます。

アプローチ

1.フェッチロジックをインライン化します

fetchData を別の関数として定義する代わりに、useEffect フック内にフェッチロジックを直接インライン化できます。

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 内で IIFE (Immediately Invoked Function Expression) としてフェッチ操作を直接実行できます。これにより、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;

ログイン後にコピー

コンポーネントでフックを使用する

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)}

); };

ログイン後にコピー

必要なコンポーネント内のデータをフェッチする代わりに、親または上位レベルのコンポーネントでデータをフェッチし、それを props として渡します。