Verschiedene Möglichkeiten zum Abrufen von Daten von APIs mithilfe von „useEffect' in React-js-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2025-01-10 22:33:43

Original

789 Leute haben es durchsucht

Different Ways to Fetch Data from APIs Using `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

Nach dem Login kopieren

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
}, []);

Nach dem Login kopieren

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;

Nach dem Login kopieren

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

); };

Nach dem Login kopieren

Anstatt Daten innerhalb der Komponente dort abzurufen, wo sie benötigt werden, rufen Sie die Daten in einer übergeordneten oder übergeordneten Komponente ab und übergeben Sie sie als Requisiten.