FullCalendar初始加载的日程更新删除后不刷新，如何实现与服务端同步？

问题根因 #

• InitialEvents是FullCalendar的一次性初始化属性，仅在组件首次渲染时生效，后续数据变更不会响应，你之前使用该属性不生效属于预期行为。
• 你当前给日历同时注入了两份初始事件源：一份是组件props绑定的eventSources={[currentevents]}，另一份是fetchData里手动调用addEventSource添加的静态数据源。初始拉取的事件来自静态数据源，refetchEvents只会刷新组件props绑定的事件源，不会刷新你手动添加的静态数据源，所以删除后调用刷新不生效。
• 你fetchData里的写法存在问题：forEach没有返回值，你赋值给data的是undefined，且代码片段中返回的clonedata变量未定义，可能导致事件ID匹配异常。
• 初始新增的事件直接存在日历实例的临时事件池里，所以删除逻辑可以正常生效。
• 原删除逻辑没有等待服务端删除接口返回结果就执行刷新，可能出现接口还未处理完成，刷新拉取到的还是旧数据的问题。

修复方案 #

1. 统一事件源管理，不要混合使用props绑定和手动添加事件源 #

删掉fetchData里的calendarRef.current.getApi().addEventSource(data)逻辑，改成把拉取到的事件存到响应式状态里，直接绑定到组件的eventSources属性即可：

// 声明响应式状态存储事件列表（React示例，Vue/Angular替换为对应框架的响应式变量即可）
const [currentevents, setCurrentevents] = useState([])

const fetchData = async () => {
  try {
    const { searchEvents: myEvents } = await searchEvents()
    // 格式化事件时间，返回新的事件数组
    const formattedEvents = myEvents.content.map((x) => ({
      ...x,
      start: new Date(x.start),
      end: new Date(x.end)
    }))
    setCurrentevents(formattedEvents)
    setIsPageLoaded(true)
  } catch (err) {
    console.log(err)
  }
}

组件props保持eventSources={[currentevents]}配置即可，不需要额外手动调用addEventSource。

2. 优化删除逻辑 #

去掉多余的本地删除操作，等待服务端删除接口返回成功后，调用refetchEvents拉取最新的服务端数据即可，避免本地操作和服务端数据不一致：

const handleDelete = async () => {
  try {
    // 等待服务端删除请求处理完成
    await deleteAvailability(e.event.id)
    setModalContent({ title: '', content: '', visible: false })
    // 刷新所有事件源，拉取最新数据
    calendarRef.current.getApi().refetchEvents()
  } catch (err) {
    console.log(err)
  }
}

3. 跨框架通用注意事项 #

该问题在Vue、Angular等其他框架中也存在，遵循以下规则即可避免：

• 不要混合使用组件属性注入事件源和实例方法手动添加事件源，统一用一种方式管理事件
• 所有需要和服务端同步的事件都要绑定到响应式属性上，不要使用静态的addEventSource添加需要持久化的事件
• 事件操作后优先调用refetchEvents拉取服务端最新数据，不要依赖本地修改临时事件

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