React中使用FullCalendar拖拽待办事项到日历出现重复事件如何修复

问题原因 #

• 当你从外部拖拽事件到FullCalendar时，触发eventReceive回调的同时，FullCalendar已经默认将拖拽生成的临时事件渲染到日历中了，你又通过setEvents手动往自己维护的事件状态数组里追加了一遍相同内容的事件，导致重复
• 代码中CalEvents.addEventSource( NewEvent )是错误写法：CalEvents是你自己声明的React状态数组，没有addEventSource实例方法，这行代码不仅多余还会触发控制台报错
• ToDoList组件中Draggable的useEffect依赖项配置错误、销毁方法传参错误，可能导致拖拽事件重复绑定

修复方案 #

1. 重写handleDrop回调 #

先调用remove方法删除FullCalendar自动生成的临时事件，再用函数式更新的方式修改你自己维护的事件状态：

const handleDrop = (info) => {
  // 第一步：删除FullCalendar自动添加的临时事件
  info.event.remove();

  const new_start = info.event.startStr;
  const new_end = info.event.endStr;
  const NewEvent = {
    id: info.event.id,
    title: info.event.title,
    color: "#8b00ff",
    start: new_start,
    end: new_end,
  };
  // 用函数式更新保证拿到的是最新的事件列表
  setEvents(prevEvents => [...prevEvents, NewEvent]);
}

2. 修复ToDoList组件的Draggable配置 #

补充useEffect的依赖项，修正销毁方法的写法：

const ToDoList = memo(({event})=>{
  const elRef = useRef(null);
  
  useEffect(() => {
    const draggable = new Draggable(elRef.current, {
      eventData: function () {
        return { ...event, create: true };
      }
    });
    // 销毁不需要传参
    return () => draggable.destroy();
  // 依赖项要加上event，避免绑定旧数据
  }, [event]);

  // 剩下的return内容保持不变即可
  // ...
})

3. 补全FullCalendar的ref绑定（可选，方便后续调用日历实例方法） #

<Fullcalendar
  ref={calendarRef}
  // 剩下的原有配置保持不变
  // ...
/>

修改完成后拖拽事件就不会再出现重复的问题了。

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