Cara Berbeza untuk Mengambil Data daripada API Menggunakan `useEffect` dalam React

Dalam React, cangkuk useEffect direka untuk menjalankan kesan sampingan seperti mengambil data apabila komponen dipaparkan. Walaupun anda tidak boleh mengelak daripada memanggil fungsi fetchData dalam kes khusus ini (kerana anda memerlukan cara untuk memulakan permintaan API), anda boleh memudahkan atau mengabstrakkannya bergantung pada keperluan anda.

Pendekatan

1. Sebaris Logik Ambil

Daripada mentakrifkan fetchData sebagai fungsi yang berasingan, anda boleh menyelaraskan logik pengambilan terus di dalam cangkuk 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

Walaupun pendekatan ini menghapuskan panggilan eksplisit untuk fetchData, logik masih wujud sebagai fungsi async sebaris.

---

2. Panggil API Secara Automatik Tanpa Fungsi Eksplisit

Anda boleh secara langsung melaksanakan operasi pengambilan sebagai IIFE (Ungkapan Fungsi Segera Diminta) dalam useEffect. Ini mengalih keluar keperluan untuk fungsi bernama seperti 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
}, []);

Dengan cara ini, logik pengambilan dilaksanakan secara langsung tanpa memanggil fungsi bernama secara eksplisit.

---

3. Gunakan Cangkuk Tersuai

Anda boleh mengabstrak logik pengambilan ke dalam cangkuk tersuai untuk merangkum fungsi dan memastikan komponen anda lebih bersih.

Cangkuk Tersuai: 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;

Gunakan Cangkuk dalam Komponen Anda

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

); };

Salin selepas log masuk

---

4. Pra-Ambil Data dalam Komponen Tahap Lebih Tinggi

Daripada mengambil data dalam komponen yang diperlukan, ambil data dalam induk atau komponen peringkat lebih tinggi dan hantarkannya sebagai prop.

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

);

Salin selepas log masuk