React中如何在页面加载完成时立即调用API？

你当前的代码会在组件每次渲染时都执行API请求，这会造成不必要的重复调用。要实现页面访问时仅调用一次API，应该使用React的useEffect钩子来控制执行时机。

修正后的完整代码 #

import React, { useEffect, useState } from 'react'

const Component = () => {
  // 用state存储API返回的数据、加载状态和错误信息
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch("api url");
        // 检查响应是否成功
        if (!res.ok) {
          throw new Error(`请求失败: ${res.status}`);
        }
        const responseData = await res.json();
        setData(responseData);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []); // 空依赖数组，确保仅在组件首次挂载时执行

  // 根据不同状态渲染对应内容
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;

  return (
    <div>
      <p>组件内容</p>
      {/* 渲染获取到的数据 */}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  )
}

export default Component

关键说明 #

• useEffect的作用：专门处理组件中的副作用操作（如API请求、DOM操作等），配合空依赖数组[]，可以让回调函数仅在组件挂载（页面访问）时执行一次。
• 异步处理：useEffect的回调不能直接是async函数，所以封装内部的fetchData异步函数来处理API请求。
• 状态管理：通过useState管理加载状态、错误信息和返回数据，让页面能根据不同状态给出相应反馈，提升用户体验。
• 错误处理：加入响应状态检查和try/catch捕获异常，避免请求失败导致组件崩溃。

内容的提问来源于stack exchange，提问作者Shreyas Abhyankar