React中使用解构与Object.entries转换meetings数据格式问题

场景说明 #

开发React项目时，接口返回的JSON数据中meetings字段结构不符合业务要求，尝试通过解构赋值、Object.entries实现格式转换未得到预期结果。

原始数据结构 #

{
  "meetings": [
    {
      "room1": "DC13",
      "room2": "AP47"
    }
  ],
  "teachers": [
    {
      "name": "Patrick",
      "speciality": "Math"
    }
    // 其余教师数据
  ],
  "alumni": [
    {
      "firstName": "Joe",
      "lastName": "Luis"
    }
    // 其余校友数据
  ]
}

目标数据结构 #

{
  "meetings": [
    {
      "name": "room1",
      "location": "DC13"
    },
    {
      "name": "room2",
      "location": "AP47"
    }
  ],
  "teachers": [
    {
      "name": "Patrick",
      "speciality": "Math"
    }
    // 其余教师数据
  ],
  "alumni": [
    {
      "firstName": "Joe",
      "lastName": "Luis"
    }
    // 其余校友数据
  ]
}

原错误代码 #

const data= {meetings, teachers, alumni}
const newData = Object.entries(meetings).reduce((acc,name,location])=>acc.concat({name,location}),[]))

错误点说明 #

• meetings字段是数组类型，存储房间与位置映射关系的是数组内的对象，直接对数组调用Object.entries会遍历得到数组索引和对应元素，无法拿到目标键值对
• reduce回调参数写法错误：回调第一个参数是累计值，第二个参数才是当前遍历项；Object.entries返回的每一项是[key, value]格式的数组，原代码解构位置错误，同时存在括号不匹配的语法问题
• 转换逻辑仅处理了meetings字段，未保留teachers、alumni字段，最终返回结构不完整

正确实现代码 #

如果meetings数组内只有一个映射对象，用以下代码即可：

// 从接口返回的原始数据中解构字段
const { meetings, teachers, alumni } = apiResponse;

// 转换meetings结构
const formattedMeetings = Object.entries(meetings[0]).map(([name, location]) => ({
  name,
  location
}));

// 组装最终数据，其余字段保持不变
const newData = {
  meetings: formattedMeetings,
  teachers,
  alumni
};

如果meetings数组可能包含多个映射对象，用flatMap做兼容处理：

const formattedMeetings = meetings.flatMap(meetingMap => 
  Object.entries(meetingMap).map(([name, location]) => ({ name, location }))
);

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