React 的 useEffect 钩子用于处理副作用，例如在组件渲染时获取数据。虽然直接调用数据获取函数 fetchData 不可避免（因为需要触发 API 请求），但我们可以通过多种方式优化代码结构和可读性。

不同的数据获取方法

1. 直接内联异步函数

将数据获取逻辑直接嵌入 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);
        } finally {
            setLoading(false);
        }
    };

    fetchData();
}, []); // 空依赖数组确保只执行一次

这种方法虽然避免了显式调用 fetchData，但逻辑仍然以内联异步函数的形式存在。

---

2. 使用立即执行函数表达式 (IIFE)

在 useEffect 中直接使用 IIFE 执行 fetch 操作，无需命名函数。

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);
        } finally {
            setLoading(false);
        }
    })(); // 立即执行函数
}, []);

这种方式简洁直接，避免了额外函数的定义。

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

---

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;

在组件中使用自定义钩子

import useFetch from './hooks/useFetch';

const MyComponent = () => {
    const { data, loading, error } = useFetch('http://127.0.0.1:5000/indicators_signals');

    if (loading) return <p>加载中...</p>;
    if (error) return <p>错误: {error.message}</p>;

    return (
        <div>
            <h1>API 数据:</h1>
            {JSON.stringify(data, null, 2)}
        </div>
    );
};

---

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>加载中...</p>;

    return <ChildComponent data={data} />;
};

const ChildComponent = ({ data }) => (
    <div>
        <h1>数据:</h1>
        {JSON.stringify(data, null, 2)}
    </div>
);

---

关键点

• 必须调用函数来发起 API 请求，这是异步操作的本质。
• IIFE、自定义钩子以及在父组件中预取数据等方法可以简化代码结构并提高可读性。
• 选择最适合项目结构和可读性需求的方法。对于可复用的数据获取逻辑，自定义钩子是最佳选择。