如何在JSX中遍历Map对象？是否存在更优实现方案？

首先得纠正你写的Map初始化代码的语法错误——Map构造函数接收的是二维数组，每个子数组是[key, value]的形式，正确写法应该是：

const map = new Map<string, string[]>([
  ['2023-08-23', ['string1', 'string2']],
  ['2023-08-24', ['string3', 'string4']]
]);

以下是几种比你当前辅助函数更简洁高效的遍历方式：

1. 用Array.from()转换为数组后遍历（最推荐） #

直接把Map的entries()（包含键值对）或values()（只包含值）转换为数组，再用数组的map方法生成JSX元素，既能拿到键值对，写法也最直观：

// 同时获取key和value，用Map的key作为JSX元素的唯一key
{Array.from(map.entries()).map(([date, strings]) => (
  <div key={date}>
    {strings.join(', ')}
  </div>
))}

// 只需要value的话，可以用map.values()，此时用索引作为key（如果没有更合适的唯一值）
{Array.from(map.values()).map((strings, index) => (
  <div key={index}>
    {strings.join(', ')}
  </div>
))}

2. 用展开运算符[...]转换数组 #

和Array.from()效果一致，语法更简洁：

{[...map.entries()].map(([date, strings]) => (
  <div key={date}>
    {strings.join(', ')}
  </div>
))}

3. 用Map原生的forEach收集元素 #

如果习惯forEach的写法，可以先遍历Map收集JSX元素，再渲染：

const renderMapContent = () => {
  const elements = [];
  map.forEach((strings, date) => {
    elements.push(<div key={date}>{strings.join(', ')}</div>);
  });
  return elements;
};

// 渲染时调用
{renderMapContent()}

对比你原来的辅助函数，这些方式不需要手动操作迭代器，代码更简洁、可读性更强，也更符合React的渲染逻辑。另外注意JSX元素必须有唯一的key属性，用Map的原生key（比如这里的日期）作为key是最优选择，比用索引更稳定。

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