React v18 + AntD：如何将现有对象数组转为表格数据源

你可以直接使用Array.map()方法完成转换，这是最简洁适配的方式，它会直接返回符合要求的新数组：

const transformedData = personData.map((person, index) => ({
  key: index.toString(), // 用索引生成唯一key，也可以直接用person._id（若_id全局唯一更稳妥）
  personName: `${person.Firstname} ${person.Lastname}`,
  personID: person._id
}));

代码说明 #

• map遍历原数组的每个人员对象，利用第二个参数index生成AntD Table要求的唯一key字段（避免渲染警告）
• 通过ES6模板字符串拼接Firstname和Lastname，得到表格列配置对应的personName字段
• 直接提取原对象的_id赋值给personID

如果一定要用forEach实现，需要手动维护结果数组：

const transformedData = [];
personData.forEach((person, index) => {
  transformedData.push({
    key: index.toString(),
    personName: `${person.Firstname} ${person.Lastname}`,
    personID: person._id
  });
});

两种方法对比：map是声明式写法，代码更简洁直观；forEach适合需要在遍历过程中执行额外操作的场景，但此处map是最优选择。

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