ReactDOM基于数组动态渲染组件时forEach循环渲染失效问题

数组方法forEach不存在返回值：

• 即使你在回调函数里写了return <Unit unit={u} />，forEach执行完毕后整体返回值永远是undefined
• JSX中大括号包裹的表达式，会把最终求值的结果作为渲染内容；当拿到undefined时自然不会渲染任何节点。循环过程中临时生成的<Unit>元素因为没有被收集回传，根本不会进入React的渲染链路，因此最终units-wrapper容器内部是空的，和你看到的实际渲染结果完全对应。

把遍历逻辑替换为带有返回值的数组遍历方法，推荐使用map：

• map会把每次回调的返回值收集起来，组成一个新的数组作为方法的最终返回值
• JSX原生支持渲染由同级元素组成的数组结构，不需要做额外的拼接处理
• 列表渲染场景下，必须给每个列表元素添加稳定唯一的key属性，否则会触发React的列表diff告警，甚至可能导致异常渲染

调整后的可运行代码：

ReactDOM.render((
  <div className="container container-collapsed">
    <Actions Units={aUnits} />
    <div className="units-wrapper">
      {
        aUnits.map(u => {
          // 取数组项中自带的唯一标识作为key，不要用数组下标
          return <Unit key={u.id} unit={u} />
        })
      }
    </div>
  </div>
), document.getElementById("root"));

修改完成后，map会返回一个包含所有<Unit>组件的数组，React会自动遍历这个数组，把每个组件渲染到units-wrapper容器下，最终生成的DOM结构和你预期的输出完全一致。

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