React中使用react-csv导出嵌套对象数组为CSV的列展示问题求助

我来帮你搞定这个问题！你当前的核心问题是把所有数据打包成了单个对象里的数组，react-csv会直接把这些数组转成逗号分隔的字符串，才导致所有内容挤在同一列。要实现你想要的分行效果，关键是先把嵌套的原始数据扁平化，让每个角色对应一条独立的记录。

解决方案步骤 #

1. 扁平化原始数据：遍历每个培训项，为它的每个角色生成一条记录——同一培训项的第一个角色保留name和description，后续角色的这两个字段设为空字符串。
2. 调整表头与数据映射：让表头和扁平化后的字段一一对应，再把处理好的数据传给CSVLink。

完整代码实现 #

// 先定义扁平化数据的工具函数
const flattenCsvData = (rawData) => {
  const flattened = [];
  rawData.forEach(item => {
    const { name, description, suggestedRoles } = item;
    // 为每个角色生成一条记录
    suggestedRoles.forEach((role, index) => {
      flattened.push({
        name: index === 0 ? name : '', // 仅第一个角色保留名称
        description: index === 0 ? description : '', // 仅第一个角色保留描述
        roleName: role.name // 每个角色的名称
      });
    });
  });
  return flattened;
};

export const ReactCsv = () => {
  const createCsvFileName = ()=> `data_${moment().format()}.csv`;
  
  // 处理原始数据为扁平化格式
  const flattenedData = flattenCsvData(csvData);
  
  // 定义对应表头
  const headers = [
    { label: 'Name', key: 'name' },
    { label: 'Description', key: 'description' },
    { label: 'RoleName', key: 'roleName' }
  ];

  return (
    <CSVLink
      data={flattenedData}
      headers={headers}
      filename={createCsvFileName()}
      target="_blank"
      style={{ textDecoration: 'none', outline: 'none', height: '5vh' }}
    >
      <Button variant="contained" color="secondary" style={{ height: '100%' }}>
        Download CSV
      </Button>
    </CSVLink>
  );
};

效果说明 #

处理后导出的CSV会完全符合你的期望：

• 每个角色单独占一行
• 同一培训项的第一行显示完整的Name和Description，后续行这两列留空
• RoleName列每行对应一个角色名称

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