如何从两个API为React Antd Table取数并实现首列骨架屏加载

核心思路 #

1. 分别管理两个API的请求状态与数据，优先加载响应快的API-2数据，先渲染表格主体
2. 首列根据API-1的加载状态动态切换骨架屏/真实数据
3. 通过唯一标识（如id）关联两个API的数据集，确保数据对应正确

完整代码实现 #

import React, { useState, useEffect } from 'react';
import { Table, Skeleton } from 'antd';

const MultiApiTable = () => {
  // 存储API-2返回的表格主体数据（响应快，先加载）
  const [mainData, setMainData] = useState([]);
  // 存储API-1返回的首列数据，用对象以id为key存储，方便快速查找
  const [firstColData, setFirstColData] = useState({});
  // API-1的加载状态，控制骨架屏显示
  const [isFirstColLoading, setIsFirstColLoading] = useState(true);

  // 模拟API请求，实际项目替换为真实接口调用
  const fetchApi2 = async () => {
    const res = await fetch('/api/api2');
    const data = await res.json();
    setMainData(data);
  };

  const fetchApi1 = async () => {
    const res = await fetch('/api/api1');
    const data = await res.json();
    // 将数组转为{id: firstColValue}的对象结构，便于后续通过id匹配数据
    const formattedData = data.reduce((acc, item) => {
      acc[item.id] = item.firstColContent;
      return acc;
    }, {});
    setFirstColData(formattedData);
    setIsFirstColLoading(false);
  };

  useEffect(() => {
    // 先请求API-2，再请求API-1
    fetchApi2();
    fetchApi1();
  }, []);

  // 表格列配置
  const columns = [
    {
      title: '首列数据',
      key: 'firstCol',
      // 用id作为关联字段，渲染时根据id匹配API-1的数据
      render: (_, record) => {
        if (isFirstColLoading) {
          return <Skeleton.Input style={{ width: 120 }} />;
        }
        return firstColData[record.id] || '-';
      },
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    // 其他列按API-2的字段配置
  ];

  return (
    <Table
      columns={columns}
      dataSource={mainData}
      rowKey="id"
      bordered
    />
  );
};

export default MultiApiTable;

关键说明 #

• 数据关联：确保两个API返回的数据都包含相同的唯一标识（如id），这样才能精准匹配首列与其他列的数据
• 骨架屏控制：通过isFirstColLoading状态切换首列的显示内容，API-1请求完成前显示Skeleton.Input，完成后显示真实数据
• 请求顺序：先调用响应快的API-2，让表格主体先渲染，提升用户体验；API-1请求完成后自动更新首列内容

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