Ant Design表格列异步数据获取/重渲染问题及代码排障

嘿，你遇到的问题很典型——Ant Design表格列的render函数不支持异步（async）写法！因为async函数本质上会返回一个Promise对象，而Ant Design的表格期望render直接返回React元素、字符串这类可渲染的内容，根本没法处理Promise，自然就啥数据都显示不出来啦。

我给你准备了两种常用的解决思路，按需选就行：

方案1：提前批量加载数据（推荐） #

如果你的表格数据是已知的，最好在组件初始化时就批量请求所有需要的库存详情，把数据存在状态里，之后在render里直接取就行，这样还能避免重复请求：

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

const YourTableComponent = () => {
  const [stocksMap, setStocksMap] = useState({});
  const [tableDataSource, setTableDataSource] = useState([]); // 你的原始表格数据
  // 假设warehouse是已定义的变量

  useEffect(() => {
    const fetchAllStockDetails = async () => {
      const tempMap = {};
      // 遍历表格数据，批量请求每个key的库存
      for (const row of tableDataSource) {
        const res = await dispatch(getStocksDetails(row.key, warehouse));
        tempMap[row.key] = res.qty;
      }
      setStocksMap(tempMap);
    };

    // 只有当表格数据存在时才发起请求
    if (tableDataSource.length) {
      fetchAllStockDetails();
    }
  }, [tableDataSource, warehouse]);

  const columns = [
    {
      title: "Stocks On Hand",
      dataIndex: "key",
      width: "33.333333333%",
      render: (key) => {
        // 没加载完时显示加载状态，加载完显示数量
        return <Text>{stocksMap[key] ?? 'Loading...'}</Text>;
      },
    },
    // 其他列配置...
  ];

  return <Table columns={columns} dataSource={tableDataSource} />;
};

方案2：封装异步子组件 #

如果必须在每一行单独请求数据，可以把异步逻辑封装成一个独立的子组件，让组件自己处理加载和数据展示：

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

// 自定义异步组件，处理单条数据的库存请求
const StockQtyDisplay = ({ rowKey, warehouse }) => {
  const [qty, setQty] = useState(null);

  useEffect(() => {
    const fetchQty = async () => {
      const res = await dispatch(getStocksDetails(rowKey, warehouse));
      setQty(res.qty);
    };
    fetchQty();
  }, [rowKey, warehouse]);

  // 加载中显示占位符，加载完成显示数量
  return <Text>{qty === null ? 'Loading...' : qty}</Text>;
};

// 在表格列中使用这个组件
const columns = [
  {
    title: "Stocks On Hand",
    dataIndex: "key",
    width: "33.333333333%",
    render: (key) => <StockQtyDisplay rowKey={key} warehouse={warehouse} />,
  },
];

你原代码里的async render函数返回的是Promise，React和Ant Design表格都无法直接渲染Promise对象，所以才会出现“没有任何数据显示”的情况。只要把异步逻辑移到render外面，让render同步返回可渲染的内容就行啦。

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