React中如何转换API响应数据？字段重命名与过滤实现

假设你的API返回数据已存入getFruits React状态，以下是符合需求的代码实现：

1. 重命名name字段为fruitname #

使用数组map方法结合对象解构，既能完成字段重命名，又保留其他原有属性：

// 生成重命名字段后的新数组
const renamedFruits = getFruits.map(fruit => {
  // 解构原对象，将name重命名为fruitname，剩余属性存入rest
  const { name: fruitname, ...rest } = fruit;
  return { fruitname, ...rest };
});

注意：如果使用箭头函数的大括号语法，必须显式写return，否则会返回undefined（这大概率是你之前map返回异常的原因）。也可以用简化写法省略return：

const renamedFruits = getFruits.map(fruit => ({
  fruitname: fruit.name,
  id: fruit.id,
  flag: fruit.flag
}));

2. 数据过滤 #

a. 获取所有flag为false的项 #

使用数组filter方法筛选符合条件的元素：

// 直接过滤原数据
const falseFlagFruits = getFruits.filter(fruit => !fruit.flag);

// 如果需要同时使用重命名后的字段，就基于renamedFruits过滤
const renamedFalseFlagFruits = renamedFruits.filter(fruit => !fruit.flag);

b. 获取id为4的项 #

因为id是唯一标识，使用数组find方法直接匹配（返回第一个符合条件的元素）：

// 从原数据中查找
const fruitWithId4 = getFruits.find(fruit => fruit.id === 4);

// 从重命名后的数据中查找
const renamedFruitWithId4 = renamedFruits.find(fruit => fruit.id === 4);

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