React中如何给API返回的对象数组批量添加公共属性

你可以用数组的map方法遍历原始响应数据，结合Object.values提取每个元素内的实际用户信息，再合并公共字段即可实现需求，代码示例如下：

// 定义要添加的公共字段
const publicFields = { school: "testing", schoolId: "2" };

// 处理原始数据
const processedData = data.map(item => {
  // 提取单个元素里的用户信息对象
  const userInfo = Object.values(item)[0];
  // 合并字段返回新对象，不会修改原始数据
  return { ...userInfo, ...publicFields };
});

// 此时processedData就是符合提交要求的格式

逻辑说明 #

• 原始数组的每个元素都是仅含1个键值对的对象，Object.values(item)会返回该对象所有值组成的数组，取第一项就能拿到{name: 'xxx'}结构的用户信息
• 用对象展开运算符...合并用户信息和公共字段，生成的新对象完全符合要求的结构

如果需要兼容不支持展开运算符的环境，可以用Object.assign实现合并：

return Object.assign({}, userInfo, publicFields);

在React请求逻辑中使用的参考示例：

// 以axios请求为例
const handleFetchAndSubmit = async () => {
  // 第一步：拉取原始数据
  const rawRes = await axios.get('/你调用的接口地址');
  const rawData = rawRes.data;
  // 第二步：处理数据
  const publicFields = { school: "testing", schoolId: "2" };
  const submitData = rawData.map(item => ({
    ...Object.values(item)[0],
    ...publicFields
  }));
  // 第三步：提交处理后的数据
  await axios.post('/提交数据的接口地址', submitData);
}

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