ReactJS应用中重构JSON文件时Array.prototype.map()使用问题求助

假设你的原始JSON数据结构类似这样：

const originalPosts = [
  {
    id: 1,
    content: "这是一篇测试文章",
    author: {
      username: "vangdo",
      avatar: "/avatar/vangdo.png",
      id: 1001
    }
  },
  {
    id: 2,
    content: "第二篇文章内容",
    author: {
      username: "john",
      avatar: "/avatar/john.png",
      id: 1002
    }
  }
];

要把每个元素的author字段从对象替换成其中的username值，正确的map写法如下：

const transformedPosts = originalPosts.map(post => ({
  // 展开原对象的所有属性，保留除author外的其他字段
  ...post,
  // 替换author字段为对应的username值
  author: post.author.username
}));

常见错误排查 #

如果之前用map没得到预期结果，大概率是以下两种问题：

1. 箭头函数返回对象时漏加小括号：如果直接写map(post => { ...post, author: ... })，花括号会被识别为函数体而非对象字面量，必须在外层加小括号()才能正确返回对象。
2. 未保留原对象的其他属性：如果只返回post.author.username，最终数组只会是一串用户名，丢失了原数据的id、content等字段，必须用展开运算符...post保留原有属性。

执行正确代码后，transformedPosts中的每个元素会变成：

{
  id: 1,
  content: "这是一篇测试文章",
  author: "vangdo"
}

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