如何实现每次点击antd表格展开按钮时重新调用接口获取数据

我之前也遇到过一模一样的问题！Antd的可展开表格默认会缓存展开后的渲染内容，所以第一次加载数据后，再点击同一行的展开按钮就不会重复触发API请求了。下面给你两种亲测有效的解决思路：

方案一：通过onExpand事件主动触发请求 #

把数据请求逻辑从展开行的渲染函数中抽离出来，绑定到expandable配置的onExpand回调上，每次用户点击展开/折叠时都主动控制请求行为：

import { Table } from 'antd';
import { useState } from 'react';

const MyExpandableTable = () => {
  // 控制哪些行处于展开状态
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);
  // 存储每一行的最新请求数据，用行ID作为key
  const [expandedRowData, setExpandedRowData] = useState({});

  const handleExpand = (expanded, record) => {
    const rowId = record.id;
    if (expanded) {
      // 只要是展开操作，就重新发起API请求
      setExpandedRowKeys(prev => [...prev, rowId]);
      fetch(`/api/your-data/${rowId}`)
        .then(res => res.json())
        .then(data => {
          setExpandedRowData(prev => ({
            ...prev,
            [rowId]: data
          }));
        })
        .catch(err => console.error('数据请求失败:', err));
    } else {
      // 折叠时移除展开状态，也可以选择保留数据（下次展开再重新请求）
      setExpandedRowKeys(prev => prev.filter(key => key !== rowId));
      // 如果不需要缓存数据，可删除对应行的数据：
      // setExpandedRowData(prev => {
      //   const newData = {...prev};
      //   delete newData[rowId];
      //   return newData;
      // });
    }
  };

  const expandedRowRender = (record) => {
    const rowId = record.id;
    const rowData = expandedRowData[rowId];
    
    if (!rowData) {
      return <div>加载中...</div>;
    }

    // 渲染你的展开内容
    return (
      <div>
        <p>最新数据：{rowData.detailInfo}</p>
        {/* 其他自定义内容 */}
      </div>
    );
  };

  // 表格列和数据源配置
  const columns = [
    { title: '名称', dataIndex: 'name', key: 'name' },
    { title: '类型', dataIndex: 'type', key: 'type' },
  ];

  const dataSource = [
    { id: 1, name: '商品A', type: '电子产品' },
    { id: 2, name: '商品B', type: '家居用品' },
  ];

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowKey="id"
      expandable={{
        expandedRowRender,
        onExpand: handleExpand,
        expandedRowKeys,
      }}
    />
  );
};

export default MyExpandableTable;

这个方案的核心是把请求逻辑和渲染逻辑分离，每次展开操作都强制触发API请求，完全避免缓存带来的问题。

方案二：在展开行组件中用useEffect监听展开状态 #

把展开内容抽成独立组件，通过useEffect监听展开状态的变化，只要从折叠变为展开，就重新请求数据：

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

// 独立的展开行内容组件
const ExpandedRowContent = ({ record, isExpanded }) => {
  const [rowData, setRowData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (isExpanded) {
      setLoading(true);
      // 每次展开状态变为true时，重新请求数据
      fetch(`/api/your-data/${record.id}`)
        .then(res => res.json())
        .then(data => {
          setRowData(data);
          setLoading(false);
        })
        .catch(err => {
          console.error('请求失败:', err);
          setLoading(false);
        });
    }
  }, [isExpanded, record.id]); // 依赖项：展开状态和行ID，变化即触发

  if (loading) return <div>加载中...</div>;
  if (!rowData) return null;

  return (
    <div>
      <p>最新详情：{rowData.description}</p>
    </div>
  );
};

// 表格组件
const MyTable = () => {
  const columns = [
    { title: '名称', dataIndex: 'name', key: 'name' },
  ];
  const dataSource = [
    { id: 1, name: '商品A' },
    { id: 2, name: '商品B' },
  ];

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowKey="id"
      expandable={{
        expandedRowRender: (record, _, __, expanded) => (
          <ExpandedRowContent record={record} isExpanded={expanded} />
        ),
      }}
    />
  );
};

export default MyTable;

额外注意点 #

• 防抖处理：如果用户频繁点击展开/折叠，建议给请求函数加防抖（比如用lodash.debounce），避免不必要的API调用。
• 错误提示：请求失败时记得给用户显示错误状态，不要只在控制台打印。
• 状态同步：如果用了全局状态管理工具（比如Redux、Zustand），要确保更新数据时同步全局状态。

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