React中如何将JSON次日闭店时间关联至对应营业日展示

核心思路是先预处理原始数据，把跨日期的open和close配对，生成包含完整时段（开始日、开始时间、结束日、结束时间）的数组，再基于这个数组渲染，全程无需修改原JSON。

步骤1：定义日期顺序与工具函数 #

先明确日期的先后顺序，避免处理时逻辑混乱；同时实现一个秒转时间的工具函数：

// 按时间先后定义日期顺序
const DAY_ORDER = ['friday', 'saturday', 'sunday'];
// 将秒数转换为HH:MM格式的时间字符串
const formatSecondsToTime = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
};

步骤2：预处理数据，配对跨日期时段 #

写一个函数将原始JSON转换为带完整时段的数组：

interface RawHourEntry {
  type: 'open' | 'close';
  value: number;
}

interface ProcessedHourSlot {
  startDay: string;
  startTime: string;
  endDay: string;
  endTime: string;
}

const processBusinessHours = (rawData: Record<string, RawHourEntry[]>): ProcessedHourSlot[] => {
  const processedSlots: ProcessedHourSlot[] = [];
  // 存储未配对的open记录（用于跨日期匹配）
  const pendingOpens: { day: string; time: number }[] = [];

  DAY_ORDER.forEach(currentDay => {
    const entries = rawData[currentDay] || [];
    entries.forEach(entry => {
      if (entry.type === 'open') {
        // 遇到open先暂存，等待对应的close
        pendingOpens.push({ day: currentDay, time: entry.value });
      } else if (entry.type === 'close') {
        // 遇到close时，取出最近的未配对open，生成完整时段
        const lastOpen = pendingOpens.pop();
        if (lastOpen) {
          processedSlots.push({
            startDay: lastOpen.day,
            startTime: formatSecondsToTime(lastOpen.time),
            endDay: currentDay,
            endTime: formatSecondsToTime(entry.value),
          });
        }
      }
    });
  });

  return processedSlots;
};

步骤3：在React组件中渲染处理后的数据 #

替换原来的双层map逻辑，直接渲染预处理好的完整时段：

import React from 'react';

const BusinessHours = () => {
  // 原始营业时长JSON数据
  const rawHoursData = {
    friday: [{ type: "open", value: 36000 }],
    saturday: [{ type: "close", value: 3600 }, { type: "open", value: 36000 }],
    sunday: [{ type: "close", value: 3600 }, { type: "open", value: 43200 }, { type: "close", value: 75600 }]
  };

  // 预处理得到完整时段数组
  const processedSlots = processBusinessHours(rawHoursData);

  return (
    <div className="business-hours">
      {processedSlots.map((slot, index) => (
        <div key={index} className="hour-slot">
          <p className="hours">
            {slot.startDay.charAt(0).toUpperCase() + slot.startDay.slice(1)} {slot.startTime} - {slot.endDay.charAt(0).toUpperCase() + slot.endDay.slice(1)} {slot.endTime}
          </p>
        </div>
      ))}
    </div>
  );
};

export default BusinessHours;

最终效果 #

处理后会生成三个清晰的完整时段：

• Friday 10:00 - Saturday 01:00
• Saturday 10:00 - Sunday 01:00
• Sunday 12:00 - Sunday 21:00

完美实现跨日期的时段关联展示，且未修改原始JSON文件。

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