如何在React的JSX中为数组的每一个元素生成对应div元素？

问题原因 #

1. Array.prototype.forEach没有返回值，执行后仅会遍历数组不会返回任何JSX元素，所以渲染区域没有内容输出，也不会触发报错。
2. 回调里的element已经是数组当前遍历项的取值，不需要再通过results[element]二次取值，只有遍历数组索引的时候才需要用下标取值，这里属于逻辑错误。

正确实现 #

React中渲染列表统一使用map方法遍历数组，同时需要给每个渲染的根元素添加唯一的key属性，优化React的diff更新效率。
最简写法如下：

{results.map((element, index) => (
  <div key={index} className={classes.SearchResults}>
    {element}
  </div>
))}

如果需要在遍历过程中添加额外逻辑，可以使用带函数体的箭头函数，手动return需要渲染的JSX：

{results.map((element, index) => {
  // 此处可添加自定义处理逻辑
  return (
    <div key={index} className={classes.SearchResults}>
      {element}
    </div>
  )
})}

注意事项 #

如果数组项本身带有唯一标识属性（比如id、uid等），优先使用该属性作为key的取值，仅在数组无固定唯一值时使用遍历下标index作为key。

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