如何在Ant Design Table中引入其他JS文件的数组作为数据源

第一步：修复并导出subcontractor.js中的数组 #

你的subcontractor.js存在语法错误（字符串未闭合、部分对象缺失name字段），先修正并导出数组：

// subcontractor.js
export const Contractors = [
    {
        id: 1,
        name: "Contractor 1",
        image: "contractorImage.svg",
        numberofcontarcts: '24 contracts',
        location: "5 Temple Way",
        locationImage: 'location.svg',
    },
    {
        id: 2,
        name: "Contractor 2",
        image: "contractorImage.svg",
        numberofcontarcts: '24 contracts',
        location: "5 Temple Way",
        locationImage: 'location.svg',
    },
    {
        id: 3,
        name: "Contractor 3",
        image: "contractorImage.svg",
        numberofcontarcts: '24 contracts',
        location: "5 Temple Way",
        locationImage: 'location.svg',
    },
    {
        id: 4,
        name: "Contractor 4",
        image: "contractorImage.svg",
        numberofcontarcts: '24 contracts',
        location: "5 Temple Way",
        locationImage: 'location.svg',
    },
    {
        id: 5,
        name: "Zombazu",
        image: "contractorImage.svg",
        numberofcontarcts: '24 contracts',
        location: "5 Temple Way",
        locationImage: 'location.svg',
    },
    {
        id: 6,
        name: "Contractor 6",
        image: "contractorImage.svg",
        numberofcontarcts: '24 contracts',
        location: "5 Temple Way",
        locationImage: 'location.svg',
    },
];

第二步：在contactor.js中导入并使用该数组 #

修改contactor.js，导入Contractors作为数据源，同时适配Ant Design Table的字段要求：

// contactor.js
import React from "react";
import Wrapper from "./style";
import { Table } from 'antd';
import 'antd/dist/antd.css';
// 导入外部数组
import { Contractors } from "./subcontractor";

const CatagoryMapping = (props) => {
    // 将数组id转为Table要求的key字段（可选，Table也可直接识别id作为唯一标识）
    const dataSource = Contractors.map(item => ({
        ...item,
        key: item.id.toString()
    }));
    
    // 调整列配置以匹配Contractors的字段
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '合同数量',
            dataIndex: 'numberofcontarcts',
            key: 'numberofcontarcts',
        },
        {
            title: '位置',
            dataIndex: 'location',
            key: 'location',
        },
        // 可选：添加图片展示列
        {
            title: '头像',
            dataIndex: 'image',
            key: 'image',
            render: (imgUrl) => <img src={imgUrl} alt="Contractor" style={{ width: 40, height: 40 }} />
        },
    ];
      
    return(
       <Wrapper>
            <Table dataSource={dataSource} columns={columns} />
       </Wrapper>
    );
}
export default CatagoryMapping;

额外提示 #

• 如果Contractors的id本身是唯一值，可直接用const dataSource = Contractors;，Table会自动将id作为行的唯一标识
• 确保文件路径正确，若两个文件在同一目录下，./subcontractor的导入路径有效
• 后续若需动态获取数据（比如接口请求），只需把Contractors的赋值逻辑替换为异步请求即可，Table的使用方式不变

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