如何在 React 中使用 FullCalendar goToDate

Question

我正在开发一个反应应用程序，它使用 FullCalendar 包将 AppointmentList（它是一个组件）显示为每日日历视图。当我调用组件 AppointmentList 时，我传入一个参数：某个日期。我想使用 FullCalendar goToDate 函数来获取我作为参数输入的日期。我尝试使用 ref 和 calendarApi 但它不起作用。

这就是我的 AppointmentList 组件现在的查找方式

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

  const calendarRef = useRef(null)
  const [date, setDate] = useState(new Date())

  const handleDateChange = ({ click }) => {
    setDate({ click })
  }

  useEffect(() => {
    calendarRef.current.getApi().gotoDate(date)
  }, [date])

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

      />
    </Box>
  )
}

export default AppointmentList

如何让 FullCalendar 转到“点击”日期？

编辑：

这就是我的页面的样子。我希望在单击上面的按钮（今天，< >）时更改日历视图。该值作为参数提供给我的组件。我确定该值已传递到我的组件，因为我在执行 console.log(click) 时看到它发生了变化，但问题是它不会更改日历视图