Next.js Airbnb克隆项目刷新后出现RangeError: Invalid time value问题求助

刷新页面时组件状态重置，若startDate/endDate未被正确初始化（如为undefined/null），或从URL参数读取的日期格式不合法，会导致date-fns的format函数无法处理无效时间值，触发RangeError。

1. 给日期状态设置合法默认值 #

初始化状态时确保日期为有效Date对象，避免空值：

// 示例：组件状态初始化
const [dateRange, setDateRange] = useState({
  startDate: new Date(),
  endDate: new Date(Date.now() + 86400000), // 默认选中次日
  key: 'selection'
});

2. 校验URL参数中的日期格式 #

若通过URL查询参数传递日期，刷新时需将字符串转为合法Date并校验有效性：

import { useRouter } from 'next/router';
import { parseISO, isValid } from 'date-fns';

const router = useRouter();

useEffect(() => {
  const { startDate, endDate } = router.query;
  if (startDate && endDate) {
    const parsedStart = parseISO(startDate);
    const parsedEnd = parseISO(endDate);
    if (isValid(parsedStart) && isValid(parsedEnd)) {
      setDateRange({
        startDate: parsedStart,
        endDate: parsedEnd,
        key: 'selection'
      });
    } else {
      // 无效日期时重置为默认值
      setDateRange({
        startDate: new Date(),
        endDate: new Date(Date.now() + 86400000),
        key: 'selection'
      });
    }
  }
}, [router.query]);

3. 格式化前校验日期有效性 #

调用format前先检查日期是否合法，避免传入无效值：

import { format, isValid } from 'date-fns';

// 替换原format调用
const displayStart = isValid(startDate) ? format(startDate, 'yyyy-MM-dd') : '';
const displayEnd = isValid(endDate) ? format(endDate, 'yyyy-MM-dd') : '';

4. 用本地存储持久化日期状态 #

若需刷新后保留选中日期，可将日期存入localStorage，组件初始化时读取：

// 日期选择变化时存入本地存储
const handleDateChange = (ranges) => {
  const selectedRange = ranges.selection;
  setDateRange(selectedRange);
  localStorage.setItem('savedDateRange', JSON.stringify({
    startDate: selectedRange.startDate.toISOString(),
    endDate: selectedRange.endDate.toISOString()
  }));
};

// 组件初始化时读取本地存储
useEffect(() => {
  const saved = localStorage.getItem('savedDateRange');
  if (saved) {
    const { startDate, endDate } = JSON.parse(saved);
    const parsedStart = new Date(startDate);
    const parsedEnd = new Date(endDate);
    if (isValid(parsedStart) && isValid(parsedEnd)) {
      setDateRange({ startDate: parsedStart, endDate: parsedEnd, key: 'selection' });
    }
  }
}, []);

• 所有传入date-fns的参数必须是有效Date对象，undefined、null或格式错误的字符串都会触发错误。
• Next.js页面刷新会重置组件状态，依赖状态的内容需从URL、本地存储或后端重新获取并校验。

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