使用.map()遍历对象数组将值重映射为col系列新键的问题排查

• 两层map都没有返回有效结果：外层遍历原始数据数组的箭头函数没有返回值，默认返回undefined；内层遍历对象属性值的map也没有返回值，做的全是无效计算
• 逻辑拆分错误：内层每次遍历单个属性的时候，都新建了一个独立的单键对象，没有把所有属性合并到同一个对象里，自然得不到一个包含所有col字段的整合对象
• 变量名冲突：内外层循环都用i当索引变量名，内层的i会覆盖外层的索引值，导致列名计数错位，和你输出里多出来多余col字段的问题对应
• 误用map方法：内层遍历只是为了给对象挂载属性，不需要返回新数组，用map本身就是场景错配

直接把每个原始对象的属性按顺序组装到同一个空对象里，外层map每次遍历返回这个组装好的完整对象，就能得到目标结构：

const data = React.useMemo(
  () =>
    props.tableData.map((item) => {
      // 为当前条目初始化一个空对象，用来承载所有col字段
      const row = {}
      // 遍历当前条目所有属性值，按顺序挂载colN的键值对
      Object.values(item).forEach((val, idx) => {
        row[`col${idx + 1}`] = val
      })
      // 返回组装好的完整对象，外层map会自动把所有对象收集成数组
      return row
    }),
  [props.tableData]
)

如果担心JS对象属性的遍历顺序和你预期不一致（比如不同环境下Object.values返回顺序变动），可以手动指定字段提取顺序，稳定性更高：

// 按你需要的顺序列原始字段名
const FIELDS = ['title', 'blurb', 'cover_image', 'pub_year', 'genre']
const data = React.useMemo(
  () =>
    props.tableData.map((item) => {
      const row = {}
      FIELDS.forEach((field, idx) => {
        row[`col${idx + 1}`] = item[field]
      })
      return row
    }),
  [props.tableData]
)

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