Verschiedene Möglichkeiten zum Abrufen von Daten von APIs mithilfe von „useEffect' in React

In React ist der useEffect-Hook so konzipiert, dass er Nebeneffekte wie das Abrufen von Daten beim Rendern der Komponente ausführt. Während Sie in diesem speziellen Fall den Aufruf der fetchData-Funktion nicht vermeiden können (da Sie eine Möglichkeit benötigen, die API-Anfrage zu initiieren), können Sie sie je nach Ihren Anforderungen vereinfachen oder abstrahieren.

Ansätze

1. Integrieren Sie die Abruflogik

Anstatt fetchData als separate Funktion zu definieren, können Sie die Abruflogik direkt in den useEffect-Hook integrieren.

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

Während dieser Ansatz den expliziten Aufruf von fetchData eliminiert, existiert die Logik weiterhin als asynchrone Inline-Funktion.

---

2. Rufen Sie die API automatisch ohne explizite Funktion auf

Sie können den Abrufvorgang direkt als IIFE (Immediately Invoked Function Expression) innerhalb des useEffect ausführen. Dadurch entfällt die Notwendigkeit einer benannten Funktion wie 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
}, []);

Auf diese Weise wird die Abruflogik direkt ausgeführt, ohne explizit eine benannte Funktion aufzurufen.

---

3. Verwenden Sie einen benutzerdefinierten Hook

Sie können die Abruflogik in einen benutzerdefinierten Hook abstrahieren, um die Funktionalität zu kapseln und Ihre Komponente sauberer zu halten.

Benutzerdefinierter Hook: 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;

Verwenden Sie den Hook in Ihrer Komponente

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