React使用fetch获取接口数据如何自动生成Ant Design Table的columns和dataSource

核心问题说明 #

1. 不要在render函数中调用fetch：render会随组件状态更新频繁执行，会导致接口重复请求；且fetch是异步方法，你直接赋值给workpack的是Promise实例，不是接口返回的实际数据，这才是你用Object.keys/Object.values拿不到预期值的根本原因，和数组的0索引没有关系，数组默认就是用数字作为下标存储元素的。

通用实现方案 #

• 类组件中接口请求放在componentDidMount生命周期中执行，拿到数据后存入组件state
• 用返回数据的第一项的键名自动生成columns数组，键名直接作为dataIndex，可按需格式化表头展示文本
• 后端返回的数组本身就可以直接作为dataSource，只需要给每一项指定唯一的rowKey即可

完整代码示例

import React, { Component } from 'react';
import { Table } from 'antd';

class WorkPackageTable extends Component {
  state = {
    dataSource: [],
    columns: [],
    loading: false
  }

  componentDidMount() {
    this.fetchTableData();
  }

  fetchTableData = async () => {
    this.setState({ loading: true });
    try {
      const response = await fetch(`${process.env.REACT_APP_API_URL}work_package`);
      const data = await response.json();
      
      // 自动生成columns
      const columns = data.length ? Object.keys(data[0]).map(key => ({
        title: key.replace(/_/g, ' ').replace(/^\w/, c => c.toUpperCase()), // 下划线转空格、首字母大写，优化表头展示
        dataIndex: key,
        key: key,
        // 如有自定义渲染需求可在此处加判断，示例：
        // render: (text) => key === 'work_package_ID' ? `编号：${text}` : text
      })) : [];

      this.setState({
        dataSource: data,
        columns: columns
      });
    } catch (err) {
      console.error('接口请求失败：', err);
    } finally {
      this.setState({ loading: false });
    }
  }

  render() {
    const { dataSource, columns, loading } = this.state;
    return (
      <Table 
        loading={loading}
        dataSource={dataSource}
        columns={columns}
        rowKey="work_package_ID" // 指定唯一标识字段作为行key
        bordered
      />
    )
  }
}

export default WorkPackageTable;

补充说明 #

这套实现是通用的，不管后端返回的数组对象里有多少字段、字段名是什么，都能自动生成对应的表格列和数据源，不需要手动逐个配置表格字段。如果有特殊的列渲染需求，只需要在生成columns的map逻辑里加对应判断即可。

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