React中如何使用FullCalendar的goToDate切换指定日期视图

你的代码存在几个关键问题，导致日历视图无法跟随传入的click日期切换，以下是修正方案：

核心问题分析 #

1. 未监听外部传入的click参数变化：你的useEffect依赖的是本地date状态，但外部按钮传递的click值更新时，组件没有触发对应的跳转逻辑。
2. dateClick事件处理错误：解构参数时用了{ click }，但FullCalendar的dateClick回调参数里的日期字段是date，且setDate错误地传入了对象而非日期值。
3. 调用gotoDate时未做安全校验：直接访问calendarRef.current.getApi()可能出现空引用报错。

修正后的代码 #

const AppointmentList = ({ click }) => {
  const arr = [
    {
      id: 1,
      title: 'event 1',
      start: '2023-03-02T10:00:00',
      end: '2023-03-02T12:00:00',
    },
  ]

  const calendarRef = useRef(null)

  // 监听外部传入的click日期变化，触发日历跳转
  useEffect(() => {
    if (calendarRef.current && click) {
      calendarRef.current.getApi().gotoDate(click)
    }
  }, [click])

  // 处理日历内部的日期点击跳转（如果需要保留这个功能）
  const handleDateChange = (info) => {
    if (calendarRef.current) {
      calendarRef.current.getApi().gotoDate(info.date)
    }
  }

  return (
    <Box>
      <FullCalendar
        ref={calendarRef}
        dateClick={handleDateChange}
        plugins={[timeGridPlugin, interactionPlugin]}
        initialView="timeGridDay"
        events={arr}
      />
    </Box>
  )
}

export default AppointmentList

关键修改说明 #

• 移除冗余的本地date状态：直接使用外部传入的click参数作为跳转依据，无需额外维护本地状态。
• 监听click参数变化：将useEffect的依赖改为click，确保外部日期更新时立即触发日历跳转。
• 添加空引用校验：调用getApi()前先判断calendarRef.current是否存在，避免组件初始化时的报错。
• 修复dateClick事件处理：正确获取info.date，并直接调用gotoDate，无需通过本地状态中转。

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