React中遍历对象遇‘map is not a function’错误，如何映射标签？

你推测的原因完全正确：rates.M是一个普通JavaScript对象，而map()是数组的原型方法，对象没有这个方法，所以会抛出rates.M.map is not a function的错误。

下面提供两种符合你需求的实现方式，根据你最终想要的数据结构选择：

方式一：生成重新命名键名的单个对象 #

如果需要将原对象的lab、dme等键替换为Lab、DME这类友好标签，同时保持层级结构，可以用以下代码：

// 定义原键名到显示标签的映射表，方便后续维护
const labelMap = {
  dme: 'DME',
  lab: 'Lab',
  drugs: 'Drugs',
  radio: 'Radio',
  therapy: 'Therapy'
};

// 将原对象转换为键值对数组，替换键名后再转回对象
const mappedRates = Object.fromEntries(
  Object.entries(rates.M).map(([key, value]) => [labelMap[key], value])
);

执行后mappedRates的结构为：

{
  "DME": { "S": "75%" },
  "Lab": { "S": "50%" },
  "Drugs": { "S": "100%" },
  "Radio": { "S": "85%" },
  "Therapy": { "S": "80%" }
}

方式二：生成包含单个标签项的数组 #

如果需要得到一个数组，每个元素是仅包含一个标签-值的对象（类似你原代码试图实现的逻辑），可以用以下代码：

const labelMap = {
  dme: 'DME',
  lab: 'Lab',
  drugs: 'Drugs',
  radio: 'Radio',
  therapy: 'Therapy'
};

// 遍历原对象的键值对数组，生成新的数组项
const rateList = Object.entries(rates.M).map(([key, value]) => ({
  [labelMap[key]]: value
}));

执行后rateList的结构为：

[
  { "Lab": { "S": "50%" } },
  { "DME": { "S": "75%" } },
  { "Therapy": { "S": "80%" } },
  { "Radio": { "S": "85%" } },
  { "Drugs": { "S": "100%" } }
]

补充：简单硬编码方式（不推荐） #

如果原对象的键固定不会变化，也可以直接手动构建目标对象，但这种方式扩展性差，后续键名变动时需要手动修改代码：

const mappedRates = {
  DME: rates.M.dme,
  Lab: rates.M.lab,
  Drugs: rates.M.drugs,
  Radio: rates.M.radio,
  Therapy: rates.M.therapy
};

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