React中遍历Map与Array的差异：为何Map遍历不渲染元素？

云上老周

2026-7-13

为什么遍历Map无法渲染元素，数组却可以？

核心原因

JavaScript的Map.prototype.forEach()方法没有返回值（默认返回undefined），React在JSX中只会渲染有效的可渲染节点（比如React元素、字符串、数字，或是这些内容组成的数组）。把forEach的结果放进JSX，相当于渲染了undefined，自然看不到内容。

而数组的Array.prototype.map()方法会返回一个新数组，数组里的每个元素就是你回调返回的<p>元素，React能正常遍历这个数组并渲染所有子元素。

解决方案

方案1：把Map转成键值对数组后用`map`遍历

<div className="previousRounds">
  {/* 用Array.from把Map的键值对转成数组，再用map渲染 */}
  {Array.from(myTestMap.entries()).map(([key, value]) => (
    <p key={key}>I've looped over a map to print this</p>
  ))}

  {currentUsersPicks.map((item, index) => (
    <p key={index}>I've looped over an array to print this</p>
  ))}
</div>

注意给每个列表元素加key属性，这是React列表渲染的必填项，用来帮助React识别元素变化。

方案2：手动收集元素后渲染

如果习惯用forEach，可以先把元素收集到数组里再渲染：

<div className="previousRounds">
  {(() => {
    const mapElements = [];
    myTestMap.forEach((value, key) => {
      mapElements.push(<p key={key}>I've looped over a map to print this</p>);
    });
    return mapElements;
  })()}

  {currentUsersPicks.map((item, index) => (
    <p key={index}>I've looped over an array to print this</p>
  ))}
</div>

这里用立即执行函数把收集好的元素数组返回给JSX，React就能正常渲染了。