React组件中无法使用.map()迭代Typescript Map对象该如何处理

错误根因 #

TypeScript抛出的报错完全符合JS运行时逻辑：ES原生的Map对象本身就没有挂载数组原型上的.map()方法。作为存储键值对的内置结构，Map的原型只提供了entries()、keys()、values()、forEach()等键值对操作相关的方法，没有实现数组的转换迭代逻辑，直接调用.map()不仅会触发类型校验错误，就算绕过TS检查，在运行时也会抛出“xxx is not a function”的异常。

可行解决方案 #

最通用的方式是利用Map实现的可迭代协议，将其转换为标准数组后再调用.map()做渲染：

• 转换可以通过扩展运算符...或者Array.from()实现，得到的数组是和Map键值对一一对应的二维元组数组，结构为Array<[键类型, 值类型]>
• 转换完成后可以在map回调里直接解构取出键和值，Map自带的字符串键天然适合作为React列表要求的唯一key属性，不需要额外生成索引值。

完整修正后的代码示例：

// 区分外层容器组件和内部的列表项组件，避免递归调用
export function MapRenderList() {
    type MyMap = Map<string, number>;
    const myMap: MyMap = new Map<string, number>();
    // 示例填充数据：myMap.set('user_1', 98).set('user_2', 76)

    // 将Map的键值对转换为可迭代的数组，两种写法完全等价
    const mapEntries = Array.from(myMap.entries());
    // const mapEntries = [...myMap];

    return (
        <div>
        {
            mapEntries.map(([userId, score]) => {  
                // 用Map的字符串键作为列表唯一标识，对应的值作为属性传递给列表项组件
                return <ListItem key={userId} score={score} />
            })
        }
        </div>
    )
}

场景变体写法 #

• 如果只需要遍历Map存储的所有值，不需要取键：可以用[...myMap.values()]生成纯值数组，再调用map渲染。不过这种方式没法直接拿到Map的唯一键，做列表key时需要依赖数组索引，唯一性和变更性能不如直接使用Map自带的键
• 如果只需要遍历所有键名做渲染：可以用[...myMap.keys()]生成键数组，适配只展示键名的场景

常见踩坑提醒 #

• 原示例代码的取值逻辑存在类型不匹配问题：因为定义的MyMap泛型是Map<string, number>，对应的值就是number类型的分数，不存在嵌套的id、score对象结构，必须从转换后的元组里按位置解构出键和值，否则会触发类型错误
• 原示例代码存在组件递归隐患：外层导出的函数本身就是名为Foo的组件，组件内部直接渲染<Foo />会触发无限递归，最终导致调用栈溢出，实际开发中必须保证容器组件和列表项组件的命名区分

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