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

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《在 React 中使用 `useEffect` 从 API 获取数据的不同方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

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

不同的数据获取方法

1. 直接内联异步函数

将数据获取逻辑直接嵌入 useEffect 钩子中，无需单独定义 fetchData 函数。

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、自定义钩子以及在父组件中预取数据等方法可以简化代码结构并提高可读性。
• 选择最适合项目结构和可读性需求的方法。对于可复用的数据获取逻辑，自定义钩子是最佳选择。

本篇关于《在 React 中使用 `useEffect` 从 API 获取数据的不同方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！