React多组件API请求（含3000ms超时）加载屏实现咨询

你的核心问题是需要等待所有5个组件的API请求+延迟操作全部完成后，再隐藏加载屏，原代码存在两个关键问题：loading逻辑颠倒、单个loading状态无法跟踪多组件的完成情况。以下是修正后的实现方案：

1. 父组件（App）改造：跟踪所有子组件的加载状态 #

用计数器记录已完成加载的组件数量，当所有组件都完成后，再隐藏加载屏：

import { useState } from 'react';

function App() {
  // 初始加载状态为true，显示加载屏
  const [loading, setLoading] = useState(true);
  // 记录已完成的组件数，共5个
  const [completedCount, setCompletedCount] = useState(0);

  // 子组件完成后调用此方法
  const handleComponentComplete = () => {
    setCompletedCount(prev => {
      const newCount = prev + 1;
      // 所有5个组件都完成后，隐藏加载屏
      if (newCount === 5) {
        setLoading(false);
      }
      return newCount;
    });
  };

  return (
    <>
      {loading ? (
        <LoadingScreen />
      ) : (
        <>
          <Component1 onComplete={handleComponentComplete} />
          <Component2 onComplete={handleComponentComplete} />
          <Component3 onComplete={handleComponentComplete} />
          <Component4 onComplete={handleComponentComplete} />
          <Component5 onComplete={handleComponentComplete} />
        </>
      )}
    </>
  );
}

2. 子组件（以Component1为例）改造：完成所有操作后通知父组件 #

修正原代码中的错误（比如anime.json()应为datas.json()），并在setTimeout的回调里完成数据更新后，再通知父组件该组件加载完成：

import { useState, useEffect } from 'react';

function Component1({ onComplete }) {
  const [data, setData] = useState([]);

  const loadData = async () => {
    try {
      const response = await fetch(`theapi`);
      if (!response.ok) {
        throw new Error('请求失败');
      }
      const value = await response.json();
      // 3000ms延迟后更新数据，并通知父组件完成
      setTimeout(() => {
        setData(value.data);
        onComplete();
      }, 3000);
    } catch (error) {
      console.error('加载数据失败:', error);
      // 即使请求失败，也标记该组件完成（或根据需求处理错误状态）
      onComplete();
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  return <>{data.length > 0 ? JSON.stringify(data) : ''}</>;
}

关键说明 #

• loading逻辑修正：原代码中loading为true时显示组件，这与需求相反，改为loading为true时显示加载屏，所有组件完成后才显示内容。
• 多组件状态跟踪：通过计数器completedCount统计已完成的组件，确保所有5个组件的延迟操作都结束后才隐藏加载屏。
• 错误处理：添加try/catch捕获请求异常，避免单个组件请求失败导致加载屏一直显示。
• 子组件通知机制：每个子组件在setTimeout回调（即延迟完成后）调用onComplete，确保父组件只在所有延迟都结束后更新状态。

所有其他4个组件（Component2~Component5）只需复制Component1的代码，修改API地址即可。

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