react-big-calendar启用拖拽后handleRangeChange功能异常求助

问题情况 #

• 未启用拖拽时，handleRangeChange功能正常；启用拖拽后出现异常：
  • 切换至月视图，范围会前后跳转但月份始终停留在一月；
  • 点击「Month」按钮，范围只能向后切换，currentDate未更新，导致日历无法加载事件；
• 修改handleRangeChange的判断逻辑后，月份可正常切换，但currentDate被设为undefined，即使通过useEffect监听也无法加载内容，尝试setCurrentDate(range.start)也未达到预期效果。

问题原因 #

启用拖拽后，react-big-calendar传递给onRangeChange的range参数格式发生变化：

• 非拖拽模式下，range是包含两个日期的数组（[开始日期, 结束日期]）；
• 拖拽模式下，range是带有start和end属性的对象，直接取range[0]会得到undefined。
  另外月视图的范围覆盖整月，需取当月第一天作为currentDate，否则会导致视图跳转异常。

解决步骤 #

1. 兼容两种模式的range参数 #

修改handleRangeChange逻辑，先判断range类型再提取正确日期：

const handleRangeChange = (range, view) => {
  // 兼容拖拽与非拖拽模式的range格式
  const startDate = Array.isArray(range) ? range[0] : range.start;

  // 针对周/日/月视图更新currentDate
  if (['week', 'day', 'month'].includes(view)) {
    setCurrentDate(startDate);
  }
};

2. 同步视图切换时的currentDate #

检查onDrillDown或视图切换回调逻辑，确保切换视图时currentDate与当前视图范围匹配：

const onDrillDown = (date, view) => {
  setCurrentView(view);
  setCurrentDate(date);
};

3. 确认拖拽组件的正确包裹 #

确保DnDCalendar是通过官方高阶组件正确包裹的：

import { Calendar, momentLocalizer } from 'react-big-calendar';
import { withDragAndDrop } from 'react-big-calendar/lib/addons/dragAndDrop';
import moment from 'moment';

const localizer = momentLocalizer(moment);
const DnDCalendar = withDragAndDrop(Calendar);

4. 排查资源视图的干扰 #

如果启用了资源视图（resources），取消注释资源访问器时需验证是否影响日期范围计算：

resourceIdAccessor={resourceView ? 'id' : undefined}
resourceTitleAccessor={resourceView ? 'name' : undefined}

后续验证 #

修改后的handleRangeChange可正确处理两种模式的参数，确保currentDate为有效日期对象，配合useEffect加载事件：

useEffect(() => {
  if (currentDate) {
    // 加载对应日期范围的事件数据
    fetchEvents(currentDate);
  }
}, [currentDate]);

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