如何在React组件中遍历对象数组按日期维度展示数据

实现思路 #

• 先对原始数据按created_date字段分组，得到每个日期对应的项目列表，无数据的日期对应空数组
• 生成近5天的标准日期序列，同时完成日期格式化（转换为Sep 12, 2021格式）
• 采用弹性布局做多列对齐，每列对应一个日期，通过统一行数的占位元素保证纵向对齐

完整代码示例 #

import React from 'react';
import './projectList.css';

const buildData = [
  {
    "project_id": "1H16SET9829",
    "created_date": "2021-09-12",
    "status": "P"
  },
  {
    "project_id": "1J01SET10974",
    "created_date": "2021-09-10",
    "status": "F"
  },
  {
    "project_id": "1J01SET10971",
    "created_date": "2021-09-09",
    "status": "P"
  },
  {
    "project_id": "1J01SET10969",
    "created_date": "2021-09-09",
    "status": "F"
  }
]

// 日期格式化工具函数
const formatDate = (dateStr) => {
  const date = new Date(dateStr);
  return new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: '2-digit',
    year: 'numeric'
  }).format(date);
};

const ProjectList = () => {
  // 1. 按日期分组原始数据
  const groupedByDate = buildData.reduce((acc, item) => {
    if (!acc[item.created_date]) {
      acc[item.created_date] = [];
    }
    acc[item.created_date].push(item);
    return acc;
  }, {});

  // 2. 生成近5天的日期列表，这里以2021-09-12为结束日期倒推，可根据需求改为动态获取当前日期
  const latest5Days = [];
  const endDate = new Date('2021-09-12');
  for (let i = 0; i < 5; i++) {
    const currDate = new Date(endDate);
    currDate.setDate(endDate.getDate() - i);
    const dateStr = currDate.toISOString().split('T')[0];
    latest5Days.push({
      dateStr,
      formatted: formatDate(dateStr),
      projects: groupedByDate[dateStr] || []
    });
  }

  // 3. 计算最大项目数，保证所有列行数一致
  const maxRowCount = Math.max(...latest5Days.map(d => d.projects.length), 0);

  return (
    <div className="project-table">
      {/* 渲染日期表头 */}
      <div className="table-header">
        {latest5Days.map(day => (
          <div className="header-cell" key={day.dateStr}>
            {day.formatted}
          </div>
        ))}
      </div>
      {/* 渲染项目行 */}
      {Array.from({length: maxRowCount}).map((_, rowIndex) => (
        <div className="table-row" key={rowIndex}>
          {latest5Days.map(day => (
            <div className="row-cell" key={day.dateStr}>
              {day.projects[rowIndex] ? 
                `${day.projects[rowIndex].project_id} (${day.projects[rowIndex].status})` : 
                ''
              }
            </div>
          ))}
        </div>
      ))}
    </div>
  )
}

export default ProjectList;

对应的CSS文件（projectList.css）：

.project-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header, .table-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #eee;
}

.header-cell, .row-cell {
  flex: 1;
  padding: 8px 12px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eee;
}

.header-cell {
  font-weight: 600;
  background-color: #f5f5f5;
}

/* 去掉最后一列的右边框 */
.header-cell:last-child, .row-cell:last-child {
  border-right: none;
}

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