我在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);
};
1条答案
按热度按时间t3psigkw1#
设置选定事件(事件);
设置打开事件模式(真);
如果
<FullCalendar>
中的状态改变,它将重新呈现。这可能导致它再次调用数据。停止在FullCalendar中更改状态,在外部执行API调用并传入数据,或者不在每次呈现时调用数据。
<FullCalendar>
的完整代码是什么?