如何在React中重新映射数组，转换对象字段结构

你可以使用JavaScript数组的map()方法，快速将给定的输入数组转换为目标结构，这也是React中处理数组映射的常用方式：

输入数组 #

const inputArr = [
  {id: '1', name: "test1", routeName: "somethig/something"},
  {id: '2', name: "something2", routeName: "foo/bar"},
  {id: '3', name: "someanothrelement", routeName: "test/test"}
];

转换逻辑 #

const resultStructureArr = inputArr.map(item => ({
  id: item.id,
  value: item.routeName,
  label: item.name
}));

转换结果 #

转换后会得到目标结构的数组：

[
  { id: '1', value: 'somethig/something', label: 'test1' },
  { id: '2', value: 'foo/bar', label: 'something2' },
  { id: '3', value: 'test/test', label: 'someanothrelement' },
];

map()方法会遍历原数组的每个元素，对每个元素返回一个新对象，仅重新映射字段对应关系，不会修改原数组本身。

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