reactjs 在eventClick和dayClick之后重新获取FullCalendar事件(作为json提要

bt1cpqcv  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(206)

我在React页面中使用FullCalendar,为了获取事件,我使用事件作为json提要(https://fullcalendar.io/docs/events-json-feed)。数据加载正常,但当我使用eventClick或dateClick打开模态时,FullCalendar正在刷新,另一个POST请求被发送到后端。
有什么办法可以阻止吗?我想避免发送不必要的请求...
此外,当数据被刷新时,日历事件被重新绘制,这会导致看起来像一个小故障。
https://user-images.githubusercontent.com/3365507/85287154-6fc61c00-b4c6-11ea-83c1-cb72a3aec944.gif
下面是我正在使用的代码的几个示例:

<FullCalendar

...

eventClick={handleEventClick}
dateClick={handleDateClick}
eventSources={[
  {
    events: fetchEvents,
    failure: function() {
      console.log('ERROR');
    }
  },
]}

...

/>

fetchEvents是这样的:

const fetchEvents = (fetchInfo, successCallback, failureCallback) => {
  fetch('http://localhost/calendarEvents', {
    method: 'POST',
    body: JSON.stringify(fetchInfo),
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => res.json())
    .then((data) => {
      const parsedEvents = [];
      for (const event of data) {
        parsedEvents.push({
          ...event,
          start: moment(event.startAt).toDate(),
          end: moment(event.endAt).toDate(),
          title: event.title
        });
      }
      successCallback(parsedEvents);
    })
    .catch((error) => {
      failureCallback(error);
    });
}

和处理事件单击:

const handleEventClick = (event) => {
  setSelectedEvent(event);
  setOpenEventModal(true);
};
t3psigkw

t3psigkw1#

设置选定事件(事件);
设置打开事件模式(真);
如果<FullCalendar>中的状态改变,它将重新呈现。这可能导致它再次调用数据。
停止在FullCalendar中更改状态,在外部执行API调用并传入数据,或者不在每次呈现时调用数据。
<FullCalendar>的完整代码是什么?

相关问题