如何在React的map函数中为同年月的映射项组添加标题？

这事儿好办！既然你的itemsList已经按创建日期降序排好了，我们只需要先把它们按年月分组，再逐个渲染分组标题和对应的条目即可。下面是修改后的完整代码，我会顺便帮你修复原代码里的一个小拼写错误：

import React from 'react';
import moment from 'moment';

const designItems = () => {
  const itemsList = [
    { id: 30, name: "Item 30", created_at: "2020-12-09T09:23:58.936Z" },
    { id: 29, name: "Item 29", created_at: "2020-12-05T09:23:58.936Z" },
    { id: 28, name: "Item 28", created_at: "2020-11-10T09:23:58.936Z" },
    { id: 27, name: "Item 27", created_at: "2020-11-02T09:23:58.936Z" },
    // 其他项
  ];

  // 第一步：按「年月」分组，用YYYY-MM作为key保证唯一性
  const groupedItems = itemsList.reduce((acc, item) => {
    // 生成分组标识：比如"2020-12"
    const dateKey = moment(item.created_at).format('YYYY-MM');
    // 生成显示用的年月标题：比如"December 2020"
    const displayDate = moment(item.created_at).format('MMMM YYYY');
    
    if (!acc[dateKey]) {
      acc[dateKey] = {
        title: displayDate,
        items: []
      };
    }
    acc[dateKey].items.push(item);
    return acc;
  }, {});

  // 第二步：遍历分组后的对象，渲染标题和对应条目
  const renderedItems = Object.entries(groupedItems).map(([key, group]) => (
    <React.Fragment key={key}>
      <h3>{group.title}</h3>
      {group.items.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </React.Fragment>
  ));

  return (
    <div>
      {renderedItems}
    </div>
  );
};

export default designItems;

关键逻辑解释： #

1. 分组处理：用Array.reduce遍历原数组，把每个item归类到对应的「年月分组」里。这里用YYYY-MM作为分组key（而不是直接用显示标题），是为了避免不同语言环境下月份名称不一致导致的分组错误，保证分组的稳定性。
2. 渲染分组：用Object.entries(groupedItems)把分组对象转成可遍历的数组，每个元素是[分组key, 分组数据]。然后用React.Fragment包裹每组的标题和条目，避免生成多余的DOM节点。
3. 修复原代码错误：原代码里的itemslist.map是拼写错误，应该是itemsList.map（注意大小写）。

这样就能完美实现你想要的结构：每个同年月的条目组前显示对应的年月标题，而且因为原数组是降序排序的，分组后的渲染顺序也会自动保持从新到旧。

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