React待办项目：无第三方包实现dueDatetime按日期分组统计任务

核心逻辑设计 #

分类的核心是消除时间比较过程中的时分秒、时区偏差，统一以「自然日零点时间戳」作为比较基准，完全基于JavaScript原生Date API实现，不引入任何第三方包。

1. 基础工具函数封装 #

首先实现可复用的日期归一化函数，确保不同来源的时间值在比较时处于同一计量维度：

// 获取指定日期所在自然日的本地零点时间戳
const getDayStartTimestamp = (dateInput) => {
  const targetDate = new Date(dateInput);
  // 重置当前日期的时分秒为0，消除当日不同时刻的时间差干扰
  targetDate.setHours(0, 0, 0, 0);
  return targetDate.getTime();
}

2. 核心分类函数 #

按照需求定义的4个分类边界完成任务匹配，输出要求的结构化对象：

• 逾期：到期日期早于今日零点
• 今日：到期日期等于今日零点
• 明日：到期日期等于明日零点（今日零点时间戳加1天的毫秒数）
• 后续日期：到期日期晚于明日零点

const groupTasksByDueCategory = (taskList) => {
  // 计算比较用的基准时间戳
  const todayStart = getDayStartTimestamp(new Date());
  const tomorrowStart = todayStart + 24 * 60 * 60 * 1000;

  // 初始化分类结果结构
  const groupedTasks = {
    overdue: [],   // 逾期任务数组
    today: [],     // 今日任务数组
    tomorrow: [],  // 明日任务数组
    upcoming: []   // 其余后续日期任务数组
  };

  // 遍历所有任务完成分类
  taskList.forEach(task => {
    const taskDueDayStart = getDayStartTimestamp(task.dueDatetime);
    if (taskDueDayStart < todayStart) {
      groupedTasks.overdue.push(task);
    } else if (taskDueDayStart === todayStart) {
      groupedTasks.today.push(task);
    } else if (taskDueDayStart === tomorrowStart) {
      groupedTasks.tomorrow.push(task);
    } else {
      groupedTasks.upcoming.push(task);
    }
  });

  return groupedTasks;
}

3. 组件内集成与数量展示 #

在React组件中，可在获取数据库返回的任务列表后直接调用上述分类函数，通过数组长度即可快速获取各分类的任务数量，无需额外计算。集成示例：

import { useState, useEffect } from 'react';

function TodoPage() {
  const [groupedTasks, setGroupedTasks] = useState({
    overdue: [],
    today: [],
    tomorrow: [],
    upcoming: []
  });

  // 拉取数据库任务后执行分类
  useEffect(() => {
    const loadTasks = async () => {
      // 替换为实际的数据库任务查询逻辑
      const taskRes = await fetch('/api/tasks');
      const tasks = await taskRes.json();
      setGroupedTasks(groupTasksByDueCategory(tasks));
    }
    loadTasks();
  }, []);

  return (
    <div className="todo-page">
      {/* 分类数量统计展示 */}
      <div className="task-stats">
        <span>逾期：{groupedTasks.overdue.length} 项</span>
        <span>今日：{groupedTasks.today.length} 项</span>
        <span>明日：{groupedTasks.tomorrow.length} 项</span>
        <span>后续：{groupedTasks.upcoming.length} 项</span>
      </div>
      {/* 各分类下的任务列表渲染逻辑 */}
    </div>
  );
}

模拟数据验证参考 #

可使用如下结构的模拟JSON数据验证逻辑正确性，假设当前日期为2024-05-13：

[
  {"id": 1, "title": "提交季度项目报告", "dueDatetime": "2024-05-10T09:00:00"},
  {"id": 2, "title": "修复登录页交互bug", "dueDatetime": "2024-05-13T14:30:00"},
  {"id": 3, "title": "准备部门周会材料", "dueDatetime": "2024-05-14T10:00:00"},
  {"id": 4, "title": "升级项目依赖版本", "dueDatetime": "2024-05-16T16:00:00"}
]

对应的分类结果为：

• overdue：包含id为1的任务（早于2024-05-13零点）
• today：包含id为2的任务（等于2024-05-13零点）
• tomorrow：包含id为3的任务（等于2024-05-14零点）
• upcoming：包含id为4的任务（晚于2024-05-14零点）

注意：如果dueDatetime字段存储的是带UTC时区标识的字符串格式，原生Date构造函数会自动完成时区解析，上述逻辑可正常兼容，无需额外适配。

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