React函数组件中结合GraphQL实现FullCalendar带回调的事件函数

适配方案 #

FullCalendar的events配置原生支持Promise返回值，你的异步函数不需要硬套官方示例里的回调写法，只需要调整逻辑即可，适配步骤如下：

1. 修正原有代码问题

你现有代码存在两个明显错误：

• forEach没有返回值，赋值给data的内容实际是undefined，处理数组生成新数组要使用map
• 不需要手动调用addEventSource，FullCalendar会自动接收你返回的事件数组完成渲染

2. 适配后的完整实现

直接把处理好的异步函数传给FullCalendar的events属性即可：

// FullCalendar组件配置
<FullCalendar
  ref={calendarRef}
  // 其他配置项省略
  events={fetchEvents} // 直接传异步函数作为事件源
/>

// 事件拉取逻辑
const fetchEvents = async (info) => {
  try {
    // 可选：如果你的GraphQL接口支持按时间范围过滤，可以把当前视图的起止时间传入查询，减少冗余数据
    const { searchEvents: myEvents } = await searchEvents({
      start: info.start.valueOf(),
      end: info.end.valueOf()
    })
    // 格式化事件时间
    const formattedEvents = myEvents.content.map(event => ({
      ...event,
      start: new Date(event.start),
      end: new Date(event.end)
    }))
    setIsPageLoaded(true)
    // 直接返回处理好的事件数组，等价于调用官方示例的successCallback
    return formattedEvents
  } catch (err) {
    console.error('日程拉取失败：', err)
    // 抛出错误等价于调用官方示例的failureCallback，FullCalendar会自动处理错误逻辑
    throw err
  }
}

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