Différentes façons de récupérer des données à partir d'API à l'aide de « useEffect

Différentes façons de récupérer des données à partir d'API à l'aide de « useEffect » dans React

Linda Hamilton

Libérer： 2025-01-10 22:33:43

original

789 Les gens l'ont consulté

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

Dans React, le hook useEffect est conçu pour exécuter des effets secondaires comme la récupération de données lors du rendu du composant. Bien que vous ne puissiez pas éviter d'appeler la fonction fetchData dans ce cas spécifique (car vous avez besoin d'un moyen de lancer la requête API), vous pouvez la simplifier ou la résumer en fonction de vos besoins.

Approches

1. Inline la logique de récupération

Au lieu de définir fetchData en tant que fonction distincte, vous pouvez intégrer la logique de récupération directement dans le hook 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

Copier après la connexion

Bien que cette approche élimine l'appel explicite à fetchData, la logique existe toujours en tant que fonction asynchrone en ligne.

2. Appeler automatiquement l'API sans fonction explicite

Vous pouvez exécuter directement l'opération de récupération en tant qu'IIFE (Immediately Invoked Function Expression) dans useEffect. Cela supprime le besoin d'une fonction nommée comme 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
}, []);

Copier après la connexion

De cette façon, la logique de récupération est directement exécutée sans appeler explicitement une fonction nommée.

3. Utilisez un crochet personnalisé

Vous pouvez résumer la logique de récupération dans un hook personnalisé pour encapsuler la fonctionnalité et garder votre composant plus propre.

Hook personnalisé : 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;

Copier après la connexion

Utilisez le crochet dans votre composant

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

); };

Copier après la connexion

Au lieu de récupérer les données à l'intérieur du composant là où elles sont nécessaires, récupérez les données dans un composant parent ou de niveau supérieur et transmettez-les en tant qu'accessoires.