React中对象数组map遍历无法得到预期映射结果是什么原因？

问题原因 #

你犯了两个核心错误：

1. 不需要用Object.keys()遍历数组：currentYear本身就是数组，直接调用.map()方法即可。Object.keys()传入数组时返回的是数组的索引字符串，你的数组只有1个元素，所以返回的是["0"]，这就是你输出0的原因。
2. 遍历数组时你没有取到对象内的label/value属性值，你直接输出了遍历拿到的元素本身，就算你直接遍历数组，拿到的也是{value: 2021, label: 2021}这个对象，不能直接渲染。

修复后的代码 #

const currentYear = [{ value: 2021, label: 2021 }];

// 渲染部分
<div className={styles.calendar_heading}>
  Calendar for Year{" "}
  {currentYear.map((item, index) => (
    <span className="input-label" key={index}>{item.label}</span>
  ))}
</div>

额外说明 #

如果你确定currentYear永远只有一个元素，完全不需要遍历，直接写currentYear[0].label就能拿到2021，代码更简洁：

<div className={styles.calendar_heading}>
  Calendar for Year{" "}
  <span className="input-label">{currentYear[0].label}</span>
</div>

注意React数组遍历需要给每一项加唯一的key属性，上面的示例里补了这个必填属性，避免控制台报错。

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