如何结合映射对象与对象数组匹配键值生成带标签的表格？

有如下映射对象：

const objectForMapping = {
  "001": "Street",
  "002": "Name",
  "003": "Town"
};

以及包含对象的数组：

const arrayOfValues = [
  {
    "questionCode": "002",
    "value": "Thomas"
  },
  {
    "questionCode": "001",
    "value": "First"
  },
  {
    "questionCode": "003",
    "value": "Mexico"
  }
];

需要生成列表项，判断arrayOfValues中元素的questionCode是否存在于objectForMapping的键中，将对应键的值作为标签展示，预期效果：

• Name: Thomas
• Street: First
• Town: Mexico

但当前代码中label显示的是questionCode而非正确标签，代码如下：

{arrayOfValues.map((element, key) => (
  <Line label={element.questionCode} description={element.value} key={key}/> 
))}

直接通过映射对象获取对应标签，同时添加容错处理：

{arrayOfValues.map((element) => {
  // 获取对应标签，不存在则使用原questionCode作为 fallback
  const label = objectForMapping[element.questionCode] || element.questionCode;
  return (
    <Line 
      label={label} 
      description={element.value} 
      key={element.questionCode} // 用唯一的questionCode作为key，比索引更可靠
    /> 
  )
})}

• 利用对象键访问语法objectForMapping[element.questionCode]，直接从映射对象中取出对应标签
• || element.questionCode做容错处理：如果某个questionCode不在映射对象中，会显示原编码，避免出现undefined或空白
• key推荐使用唯一标识（如element.questionCode），而非数组索引，避免组件渲染异常

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