为react-day-picker的modifiers添加日期以显示节假日

问题分析 #

你的代码核心问题是循环中重复覆盖types["holiday"]的值：
在forEach循环里，每次都将types["holiday"]直接赋值为当前节假日的日期数组，前一次循环的结果会被后一次完全覆盖。最终返回的types里只会保留最后一个节假日的日期（你看到首个显示可能是数组后续日期解析失败，或是测试时数组仅第一个数据有效）。

修复后的代码 #

const modifiersHoliday = (holidays) => {
  // 先初始化holiday为一个空数组，用于存储所有节假日日期
  const types = { holiday: [] };

  holidays.forEach((holi) => {
    const holidayDate = dayjs(holi.holiday_date).toDate();
    // 获取当前节假日的日期范围数组（单个日期时返回单元素数组）
    const currentHolidayDates = getDatesBetweenRange(holidayDate, holidayDate);
    // 将当前日期数组合并到总数组中
    types.holiday.push(...currentHolidayDates);
  });

  return types;
};

额外注意事项 #

• 确认getDatesBetweenRange函数的返回值：如果它在起止日期相同时返回单个Date对象而非数组，需要把push(...currentHolidayDates)改成push(currentHolidayDates)
• 检查holiday_date的格式是否能被dayjs正确解析，若格式不兼容，后续日期无法生成有效Date对象，也会导致不显示

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