React Ant Design表格列render中调用方法问题求助

我是React新手，正在使用Ant Design开发客户信息展示页面。目前产品、国家等信息显示的是ID（如下图），我希望显示对应的名称。我有getProductById()、getCountryById()等方法，但无法在表格列的render中调用，尝试多种方案仍未解决。请问如何在columns的render中调用这些方法，或者有其他解决方案吗？

useEffect(() => {
  dispatch(
    getCustomerInfoListPaged({
      identity: appConfig.config.customerId,
    })
  );
}, [dispatch]);

const columns: ColumnType<CustomerDto>[] = [
  {
    title: l("Actions"),
    width: 50,
    render: (text, rec, index) => (
      <div>
        <Dropdown
          trigger={["click"]}
          overlay={
            <Menu>
              <Menu.Item key={1} onClick={() => handleDeleteClick(rec)}>
                {l("Delete")}
              </Menu.Item>
            </Menu>
          }
        >
          <Button type="primary" icon={<MenuOutlined />}>
            {l("Actions")}
          </Button>
        </Dropdown>
      </div>
    ),
  },
  {
    title: l("Name"),
    dataIndex: "customerName",
    key: "customerName"
  },
  {
    title: l("Surname"),
    dataIndex: "customerSurname",
    key: "customerSurname"
  },
  {
    title: l("Product"),
    dataIndex: ["productId"],
    key: "productId",
    //render: (text) => (),
  },
  {
    title: l("Country"),
    dataIndex: ["countryId"],
    key: "countryId",
  },
  {},
];

return (
  <Card title={l("List")}>
    <div>
      <Form
        id="searchForm"
        form={form}
        layout="vertical"
        autoComplete="off"
        onFinish={onFormFinish}
      >
        {}
      </Form>
    </div>

    <Table
      rowKey="id"
      size="small"
      dataSource={customerList?.items || []}
      columns={columns}
      onChange={handleTableChange}
    ></Table>
  </Card>
);
};

情况1：getProductById/getCountryById是同步方法 #

如果这两个方法是从本地缓存、全局状态或者内存数据中同步获取名称，直接在render函数里调用即可：

const columns: ColumnType<CustomerDto>[] = [
  // ...其他列
  {
    title: l("Product"),
    dataIndex: ["productId"],
    key: "productId",
    render: (productId) => {
      // 调用同步方法获取名称，找不到则显示原ID
      const product = getProductById(productId);
      return product?.name || productId;
    },
  },
  {
    title: l("Country"),
    dataIndex: ["countryId"],
    key: "countryId",
    render: (countryId) => {
      const country = getCountryById(countryId);
      return country?.name || countryId;
    },
  },
];

情况2：getProductById/getCountryById是异步方法（比如调用后端接口） #

如果方法是异步的，不能直接在render里调用（会触发无限重渲染），需要提前预加载所有产品、国家数据到组件状态中：

步骤1：预加载数据 #

const [products, setProducts] = useState<Record<string, any>>({});
const [countries, setCountries] = useState<Record<string, any>>({});

useEffect(() => {
  // 先获取客户列表
  dispatch(getCustomerInfoListPaged({ identity: appConfig.config.customerId }))
    .then(() => {
      // 假设你有获取所有产品/国家列表的接口
      Promise.all([
        fetchAllProducts(),
        fetchAllCountries()
      ]).then(([productList, countryList]) => {
        // 转成ID为键的对象，方便快速查找
        const productMap = productList.reduce((map, item) => {
          map[item.id] = item;
          return map;
        }, {});
        const countryMap = countryList.reduce((map, item) => {
          map[item.id] = item;
          return map;
        }, {});
        setProducts(productMap);
        setCountries(countryMap);
      });
    });
}, [dispatch]);

步骤2：在render中使用预加载的数据 #

const columns: ColumnType<CustomerDto>[] = [
  // ...其他列
  {
    title: l("Product"),
    dataIndex: ["productId"],
    key: "productId",
    render: (productId) => products[productId]?.name || productId,
  },
  {
    title: l("Country"),
    dataIndex: ["countryId"],
    key: "countryId",
    render: (countryId) => countries[countryId]?.name || countryId,
  },
];

替代方案：后端直接返回名称 #

如果前端处理麻烦，也可以和后端沟通，在返回客户列表接口时，直接把产品名称、国家名称一起返回，这样前端不需要额外调用方法，直接通过dataIndex获取即可。

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