如何将每个月份创建的用户数据在同一行中展示

实现步骤 #

1. 数据分组
   首先对原始用户数组按created-at属性做聚合，把相同创建月份的用户归为同一组，分组的键直接使用月份+年份的字符串即可：

const users = [
  { name: 'user1', 'created-at': 'November 2023' },
  { name: 'user2', 'created-at': 'November 2023' },
  { name: 'user3', 'created-at': 'October 2023' },
  { name: 'user4', 'created-at': 'December 2023' }
];

// 按月份分组的核心逻辑
const monthGroups = users.reduce((groups, user) => {
  const month = user['created-at'];
  if (!groups[month]) groups[month] = [];
  groups[month].push(user);
  return groups;
}, {});

2. 页面渲染
   遍历分组后的数据，每组渲染一行，行首放月份标题，后面依次放同一月份的所有用户即可。以下是React场景的渲染示例：

export default function UserList() {
  // 省略上面的分组逻辑
  return (
    <div className="wrap">
      {Object.entries(monthGroups).map(([month, users]) => (
        <div key={month} className="row">
          <div className="month-label">{month}</div>
          <div className="user-items">
            {users.map(u => <span key={u.name} className="user-tag">{u.name}</span>)}
          </div>
        </div>
      ))}
    </div>
  )
}

3. 样式调整
   增加简单CSS保证同一行展示效果：

.row {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.month-label {
  width: 130px;
  font-weight: 600;
}
.user-items {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.user-tag {
  padding: 4px 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

内容的提问来源于stack exchange，提问作者Ghulam Azam Khan