JavaScript中.map()多维应用：适配Material UI DataGrid数组转换

问题分析 #

你当前通过字符串拼接生成对象的方式不仅冗余，还容易引发特殊字符转义、类型错误等问题，直接通过JavaScript的对象操作API就能更安全高效地实现需求。

正确实现方式 #

1. 转换rows数组（核心部分）

你可以使用reduce或Object.fromEntries来动态构建每个row对象，同时保留原数据中的id作为DataGrid要求的唯一标识：

方法一：使用reduce

setNewRows(projects?.map(project => {
  // 遍历表头，组装对应键值对
  const rowData = tableHeaders.reduce((result, header) => {
    // 处理null/undefined，替换为空字符串，和你原逻辑一致
    result[header] = project[header] ?? '';
    return result;
  }, {});
  
  // 必须添加id字段，DataGrid要求每行有唯一id
  return { ...rowData, id: project.id };
}));

方法二：使用Object.fromEntries（更简洁）

setNewRows(projects?.map(project => {
  // 将表头和对应值转为[key, value]数组，再转为对象
  const rowData = Object.fromEntries(
    tableHeaders.map(header => [header, project[header] ?? ''])
  );
  
  return { ...rowData, id: project.id };
}));

2. 修正columns的field配置（重要）

你之前把field设为index，这会导致DataGrid无法匹配row中的字段（因为row里的键是表头名称），需要把field改为表头本身：

setNewColumns(tableHeaders?.map(header => {
  return { 
    field: header, // 与row中的键名对应
    headerName: header,
    width: 90
  }
}));

为什么这两种方式更好 #

• 避免字符串拼接带来的潜在bug（比如值包含引号时会破坏对象结构）
• 代码更简洁易读，符合JavaScript的标准对象操作逻辑
• 类型安全，直接生成对象而非字符串解析后的对象

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