React中如何按日期分组渲染日志数组？先处理数据还是直接渲染？

我有一个日志数组LogItems，结构如下：

LogItems = [
    {
       description: "I am the first log",
       timestamp: "2023-02-20T20:15:43.2357511Z"
    }, 
    {
       description: "I am the fourth log",
       timestamp: "2023-02-20T21:20:43.2357511Z"
    }, 
    {
       description: "I am the second log",
       timestamp: "2023-01-20T20:10:43.2357511Z"
    },
    {
       description: "I am the third log",
       timestamp: "2023-01-20T20:10:43.2357511Z"
    }
];

我希望在React组件中按如下格式渲染该数据：

20 Jan 2023
    8:10 PM
         I am the second log
         I am the third log
20 Feb 2023
   8:15 PM
        I am the first log
   9:20 PM
        I am the fourth log

作为React新手，我想询问：是否需要先将日志数组转换为嵌套结构，还是可以直接在JSX中渲染出该格式？求指导。

肯定是先把数组转成嵌套结构再渲染更靠谱，直接在JSX里硬写分组逻辑会让代码乱糟糟的，后期改需求或者维护起来特别费劲，嵌套结构的可读性和扩展性要好太多。

步骤1：把原始数组转成嵌套结构 #

首先要把日志按「日期」→「时间」→「日志内容」的层级分组，用Array.reduce()就能搞定：

// 定义时间格式化工具函数，处理timestamp
const formatDate = (timestamp) => {
  const date = new Date(timestamp);
  return date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
};

const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true }).replace(/^0/, '');
};

// 转换为嵌套结构
const groupedLogs = LogItems.reduce((acc, log) => {
  const dateKey = formatDate(log.timestamp);
  const timeKey = formatTime(log.timestamp);

  // 初始化日期分组
  if (!acc[dateKey]) {
    acc[dateKey] = {};
  }
  // 初始化时间分组
  if (!acc[dateKey][timeKey]) {
    acc[dateKey][timeKey] = [];
  }
  // 添加日志描述
  acc[dateKey][timeKey].push(log.description);

  return acc;
}, {});

转换后的结构大概是这样：

{
  "20 Jan 2023": {
    "8:10 PM": ["I am the second log", "I am the third log"]
  },
  "20 Feb 2023": {
    "8:15 PM": ["I am the first log"],
    "9:20 PM": ["I am the fourth log"]
  }
}

步骤2：在React组件中渲染 #

有了嵌套结构后，就可以用嵌套的Object.entries()配合JSX逐层渲染：

import React from 'react';

const LogViewer = ({ LogItems }) => {
  // 放入上面的formatDate、formatTime和groupedLogs逻辑

  return (
    <div style={{ whiteSpace: 'pre-line', fontFamily: 'monospace' }}>
      {Object.entries(groupedLogs).map(([date, timeGroups]) => (
        <div key={date}>
          {date}
          {Object.entries(timeGroups).map(([time, descriptions]) => (
            <div key={time} style={{ paddingLeft: '4em' }}>
              {time}
              {descriptions.map((desc, idx) => (
                <div key={idx} style={{ paddingLeft: '4em' }}>
                  {desc}
                </div>
              ))}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default LogViewer;

为什么不直接在JSX里硬渲染？ #

如果硬在JSX里处理分组逻辑，你需要反复对比前后日志的日期、时间，代码里会充斥大量条件判断，不仅写起来麻烦，后期改样式层级或者加筛选、排序功能时，排查问题会非常头疼。提前整理数据相当于把「数据处理」和「视图渲染」分离，完全符合React组件的设计思路。

额外提示 #

• 记得给每个循环项加唯一的key属性，避免React警告
• 样式可以用CSS类代替内联样式，更便于统一维护
• 如果需要按时间顺序排列日期和时间，可以在转换结构后对分组结果做排序

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