如何按指定顺序为React部门组件依次获取API数据？

要实现按DEPARTMENTS定义的顺序依次加载每个部门的数据，核心是控制每个DepartmentSection的API请求时机，不让所有组件一挂载就并发请求，而是等前一个部门加载完成后，再触发下一个的请求。

方案实现步骤 #

1. 修改父组件 AllDepartmentsWrapper

父组件需要维护加载进度状态，跟踪当前允许加载的部门索引，并接收子组件的加载完成通知来推进加载顺序：

import React, { useState } from 'react';
import DepartmentSection from './DepartmentSection';

// 把常量移到组件外，避免每次渲染重新创建
export const DEPARTMENTS = {
  Math: 1,
  Science: 2,
  // ... 其他部门
};
// 转成有序数组，保证顺序与定义一致
const DEPARTMENT_NAMES = Object.keys(DEPARTMENTS);

const AllDepartmentsWrapper = () => {
  // 控制当前可加载的部门索引，初始仅允许第一个部门加载
  const [currentLoadIndex, setCurrentLoadIndex] = useState(0);

  // 子组件加载完成后调用，推进到下一个部门
  const handleSectionLoaded = () => {
    if (currentLoadIndex < DEPARTMENT_NAMES.length - 1) {
      setCurrentLoadIndex(prev => prev + 1);
    }
  };

  return (
    <div>
      {DEPARTMENT_NAMES.map((deptName, index) => (
        <DepartmentSection
          key={deptName}
          name={deptName}
          // 只有当前部门索引 <= 允许加载的索引时，才触发请求
          shouldLoad={index <= currentLoadIndex}
          // 加载完成的回调
          onLoaded={handleSectionLoaded}
        />
      ))}
    </div>
  );
};

export default AllDepartmentsWrapper;

2. 修改子组件 DepartmentSection

子组件需要根据父组件传入的shouldLoad判断是否发起请求，并在加载完成（或失败）时通知父组件：

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

const DepartmentSection = ({ name, shouldLoad, onLoaded }) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 只有允许加载时才发起请求
    if (shouldLoad) {
      setLoading(true);
      setError(null);
      fetchDepartmentData(name)
        .then(resp => {
          setData(resp);
          setLoading(false);
          // 通知父组件当前部门加载完成
          onLoaded();
        })
        .catch(err => {
          console.error(`加载${name}数据失败:`, err);
          setError('加载失败');
          setLoading(false);
          // 即使请求失败，也推进下一个部门加载（可根据需求调整）
          onLoaded();
        });
    }
  }, [name, shouldLoad, onLoaded]);

  // 还未到当前部门的加载时机时，显示占位内容
  if (!shouldLoad) {
    return (
      <div>
        <h1>{name}</h1>
        <div>等待加载...</div>
      </div>
    );
  }

  return (
    <div>
      <h1>{name}</h1>
      {loading && 'loading...'}
      {error && <div style={{ color: 'red' }}>{error}</div>}
      {!loading && !error && <DataGraph data={data} />}
    </div>
  );
};

export default DepartmentSection;

关键逻辑说明 #

• 父组件通过currentLoadIndex控制加载队列，初始只允许第一个部门加载；
• 子组件仅在shouldLoad为true时发起API请求，避免并发加载；
• 子组件加载完成（或处理完错误）后，调用onLoaded通知父组件，父组件更新currentLoadIndex，允许下一个部门开始加载；
• 严格遵循DEPARTMENTS定义的顺序，完成一个再加载下一个。

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