在 React 中使用 `useEffect` 从 API 获取数据的不同方法

在 React 中，useEffect 钩子旨在运行副作用，例如在组件渲染时获取数据。虽然在这种特定情况下您无法避免调用 fetchData 函数（因为您需要一种方法来发起 API 请求），但您可以根据您的要求对其进行简化或抽象。

方法

1.内联获取逻辑

您可以将 fetchData 直接内联到 useEffect 挂钩内，而不是将 fetchData 定义为单独的函数。

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 中直接将 fetch 操作作为 IIFE（立即调用函数表达式）执行。这消除了对像 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;

在组件中使用 Hook

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

); };

登录后复制

---

4.在更高级别的组件中预取数据

不要在需要的组件内部获取数据，而是在父级或更高级组件中获取数据并将其作为 props 传递。

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

);

登录后复制