React JS中如何对API返回数据按日期排序实现按日期分组的表格

实现思路 #

你可以按照「数据分组→日期排序→分层渲染」三个步骤实现需求：

• 数据分组：把接口返回的扁平数据按日期字段归组，相同日期的所有数据项存到同一个数组中
• 日期排序：提取所有分组的日期key，按时间顺序做升序/降序排序
• 分层渲染：遍历排序后的日期列表，先渲染当前日期的分组标识，再遍历该日期下的所有数据项渲染表格行，也可以通过单元格合并实现同日期跨行展示效果

核心代码示例 #

首先实现通用分组工具函数：

// 按指定字段对数组分组
const groupBy = (list, groupKey) => {
  return list.reduce((result, item) => {
    const key = item[groupKey]
    if (!result[key]) {
      result[key] = []
    }
    result[key].push(item)
    return result
  }, {})
}

拿到接口返回数据后做处理：

// 假设接口返回的原始数据存在rawList中，日期字段为date
const groupedByDate = groupBy(rawList, 'date')
// 对日期做升序排序，要倒序可替换为 new Date(b) - new Date(a)
const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(a) - new Date(b))

渲染表格时按分组遍历：

<tbody>
  {sortedDates.map(date => (
    // 每个日期分组单独渲染
    <React.Fragment key={date}>
      {/* 分组表头：如果需要合并单元格，这里给日期列加rowSpan属性即可 */}
      <tr>
        <td rowSpan={groupedByDate[date].length}>{date}</td>
        <td>{groupedByDate[date][0].其他字段1}</td>
        <td>{groupedByDate[date][0].其他字段2}</td>
      </tr>
      {/* 渲染当前日期下剩余的其他数据行，跳过已经渲染的第一行的日期列 */}
      {groupedByDate[date].slice(1).map(item => (
        <tr key={item.id}>
          <td>{item.其他字段1}</td>
          <td>{item.其他字段2}</td>
        </tr>
      ))}
    </React.Fragment>
  ))}
</tbody>

注意事项 #

• 如果你的日期字段包含时分秒，需要先统一格式化为YYYY-MM-DD格式的字符串再分组，避免同一天不同时间的数据被分到不同组
• 排序时需要把日期字符串转为Date对象再比较，不要直接对比字符串避免排序错误

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