如何在React JSX中遍历渲染TypeScript Map对象

你定义的TypeScript类型Map可以通过以下几种常用方式遍历渲染，注意JSX渲染列表时必须给每个顶层元素加唯一key属性，这里Map的数字类型键天然唯一，直接用作React的key即可。

方法1：Array.from()转换后遍历 #

Map的默认迭代器返回的就是键值对，直接传入Array.from就能转成普通键值对数组，之后调用数组的map方法返回JSX元素即可：

function DemoComponent() {
  const myMap = new Map<number,string>([
     [10, "text1"],
     [15, "text2"],
     [20, "text3"]
  ])

  return (
    <div className="map-list">
      {Array.from(myMap).map(([mapKey, mapValue]) => (
        <p key={mapKey}>
          键：{mapKey}，对应值：{mapValue}
        </p>
      ))}
    </div>
  )
}

如果显式调用myMap.entries()传入Array.from，效果和上面完全一致。

方法2：展开运算符转数组后遍历 #

用展开运算符...可以直接把Map的键值对展开成数组，写法更简洁：

function DemoComponent() {
  const myMap = new Map<number,string>([
     [10, "text1"],
     [15, "text2"],
     [20, "text3"]
  ])

  return (
    <ul>
      {[...myMap].map(([key, value]) => (
        <li key={key}>{value}</li>
      ))}
    </ul>
  )
}

方法3：单独遍历键或值 #

如果只需要渲染Map的键或者值，不需要同时拿到两者，可以直接用Map.keys()或Map.values()转数组遍历：

// 仅渲染所有值
{[...myMap.values()].map((value, index) => (
  <span key={index} className="map-value">{value}</span>
))}

注意：该写法用数组索引作为key，仅适合Map内容完全静态、不会出现增删、排序操作的场景，否则优先用Map本身的键作为key，避免出现渲染状态错乱的bug。

避坑提示 #

不要直接用Map的forEach方法遍历返回JSX，forEach本身没有返回值，无法直接给JSX返回可渲染的元素数组，会导致内容渲染失败。

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