React格式化日期遇RangeError:Invalid time value，空数组时如何校验booking？

开发者阿泽

2026-8-4

解决RangeError: Invalid time value及booking空值检查问题

问题分析

你遇到的错误看似是日期格式问题，但结合bookings数组为空的情况，实际可能是两种场景：

bookings本身为null/undefined（而非空数组），导致调用map时报错
即使bookings是数组，其中存在null/undefined的booking项，或者booking.startDate本身是无效值（比如null、空字符串）

解决方案

通过多层检查规避错误，同时处理空状态：

先校验bookings数组本身的有效性
确保bookings是存在且非空的数组，否则渲染空状态提示。
过滤无效的booking项
在map前过滤掉null/undefined的booking，或者在渲染时单独判断跳过。
验证startDate的有效性
确保startDate能被new Date()正确解析后，再执行格式化操作。

修改后的代码示例

import React from "react";
import type { RoomBooking } from "../../services/room/room";
import format from "date-fns/format";

export const BookingList = ({ bookings }: { bookings?: RoomBooking[] }) => {
  // 检查bookings是否为有效非空数组
  if (!bookings || bookings.length === 0) {
    return <p>暂无预订记录</p>;
  }

  return (
    <ul>
      {bookings.map((booking, index) => {
        // 跳过null/undefined的booking项
        if (!booking) return null;
        
        // 验证startDate是否为有效时间值
        const startDate = new Date(booking.startDate);
        if (isNaN(startDate.getTime())) {
          return <li key={`booking-${index}`}>无效日期</li>;
        }

        return (
          <li key={`booking-${index}`}>
            {format(startDate, "dd/MM/yyyy")}
          </li>
        );
      })}
    </ul>
  );
};