Axios获取接口数据无法渲染至Ant Design Pro嵌套ProTable子表

子表接口数据无法渲染是两个问题叠加导致的：

1. 渲染时序问题：expandedRowRender是同步执行的渲染函数，内部的request请求是异步操作，组件首次完成渲染时，你定义的普通数组data还是空值，等接口返回数据push到数组时，渲染已经结束了。
2. 无状态更新触发：你用普通const data = []变量存储请求结果，变量内容变化时React无法感知，不会触发组件重渲染，所以空的子表不会更新成有数据的状态。

之前静态数据能正常显示，是因为赋值是同步操作，渲染执行时data已经填充了内容。

不要在expandedRowRender内部直接写异步请求逻辑，以下两种方案都可以解决问题： #

方案1：父组件统一维护展开行数据（推荐，适合子数据和父行关联的场景） #

在父组件层通过React状态存储每个展开行对应的子表数据，触发行展开时再请求对应子数据，状态更新会自动触发视图重绘：

import { useState } from 'react';
import ProTable from '@ant-design/pro-table';

const ParentTable = () => {
  // 按父行唯一key存储对应子表数据
  const [subTableData, setSubTableData] = useState<Record<string | number, any[]>>({});
  // 按父行唯一key存储子表加载状态
  const [subTableLoading, setSubTableLoading] = useState<Record<string | number, boolean>>({});

  // 行展开/收起回调
  const handleExpand = async (expanded: boolean, parentRecord: any) => {
    // 收起行、已加载过数据的行不重复请求
    if (!expanded || subTableData[parentRecord.key]) return;

    setSubTableLoading(prev => ({...prev, [parentRecord.key]: true}));
    try {
      const res = await request('/api/testdb', {
        method: 'get',
        // 若子数据和父行绑定，在这里传父行id等查询参数：params: { parentId: parentRecord.id }
      });
      // 给子项补唯一key避免渲染警告
      const formatData = res.param.map((item: any, idx: number) => ({
        ...item,
        key: item.key || idx
      }));
      setSubTableData(prev => ({...prev, [parentRecord.key]: formatData}));
    } catch (err) {
      console.error('子表数据请求失败', err);
    } finally {
      setSubTableLoading(prev => ({...prev, [parentRecord.key]: false}));
    }
  };

  const expandedRowRender = (record: any) => {
    return (
      <ProTable
        columns={[
          { title: '参数名', dataIndex: 'param_name', key: 'param_name' },
          { title: '变量类型', dataIndex: 'var_type', key: 'var_type' },
          { title: '变量名', dataIndex: 'var_name', key: 'var_name' },
          { title: '变量值', dataIndex: 'var_value', key: 'var_value' },
        ]}
        headerTitle={false}
        search={false}
        options={false}
        loading={subTableLoading[record.key]}
        dataSource={subTableData[record.key] || []}
        pagination={false}
      />
    );
  };

  return (
    <ProTable
      // 父表格原有配置：rowKey、columns、request等
      expandable={{
        expandedRowRender,
        onExpand: handleExpand
      }}
    />
  );
};

方案2：子表抽离为独立组件自管理状态（适合子表逻辑独立的场景） #

把嵌套的ProTable抽成单独组件，组件挂载时自行请求数据、维护自身状态，逻辑解耦更易维护：

import { useState, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';

// 独立子表组件
const ConfigSubTable = () => {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await request('/api/testdb', {method: 'get'});
        const formatData = res.param.map((item: any, idx: number) => ({
          ...item,
          key: item.key || idx
        }));
        setData(formatData);
      } catch (err) {
        console.error('子表数据请求失败', err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return (
    <ProTable
      columns={[
        { title: '参数名', dataIndex: 'param_name', key: 'param_name' },
        { title: '变量类型', dataIndex: 'var_type', key: 'var_type' },
        { title: '变量名', dataIndex: 'var_name', key: 'var_name' },
        { title: '变量值', dataIndex: 'var_value', key: 'var_value' },
      ]}
      headerTitle={false}
      search={false}
      options={false}
      loading={loading}
      dataSource={data}
      pagination={false}
    />
  );
};

// 父表格中直接引用
const expandedRowRender = () => {
  return <ConfigSubTable />;
};

• 所有需要驱动视图更新的数据，必须存在React状态（useState/useReducer）中，不要用普通变量、闭包变量存异步请求的结果。
• 表格数据必须保证每一行有唯一的key字段，否则会出现渲染错位、状态异常问题。
• 如果不同父行对应的子表数据不同，不要让所有子表共用同一份数据源，要按父行唯一标识分别存储。

内容的提问来源于stack exchange，提问作者jason-lin