fullCalendar 在正确解析后端的响应后在 successCallback 上抛出未定义的错误

Question

我正在使用 fullCalendar 5.5.1 在屏幕上显示一些事件。我从数据库中获取数据，它按预期工作。我遇到的唯一问题是，在某些情况下我收到错误：

未捕获（承诺中）TypeError：successCallback（...）未定义

如果数据库的响应为空，就会发生这种情况，但在 fullCalendar 解析从数据库返回的所有数据后也会发生这种情况（就像管理所有记录后不会停止一样）。

为了避免第一种情况发生，我检查了响应长度，如果它是 0，它就会停止解析并且工作正常，但我不知道如何避免其他情况。

我的数据示例（从控制台打印）

0: Object { title: "Evento di test 1 - 7 hours", start: "2024-06-01T22:00:00.000Z", duration: 7 }​
1: Object { title: "Evento di test 2 - 3 hours", start: "2024-06-01T22:00:00.000Z", duration: 3 }
2: Object { title: "Evento di test 3 - 3 hours", start: "2024-06-06T22:00:00.000Z", duration: 3 }
3: Object { title: "Evento di test 4 - 7 hours", start: "2024-06-09T22:00:00.000Z", duration: 7 }
4: Object { title: "Evento di test 5 - 4 hours", start: "2024-06-20T22:00:00.000Z", duration: 4 }
5: Object { title: "Evento di test 6 - 6 hours", start: "2024-06-22T22:00:00.000Z", duration: 6 }
6: Object { title: "Evento di test 7 - 3 hours", start: "2024-06-28T22:00:00.000Z", duration: 3 }

虽然我使用的代码是：

        var calendar = new Calendar(calendarEl, {
            timeZone: 'local',
            customButtons: {
                newEvent: {
                    text: 'New record',
                    click: function () {
                        alert('clicked the custom button!');
                    }
                }
            },
            headerToolbar: {
                right: 'prev,next today',
                left: 'title',
                center: 'newEvent',
                //right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },
            themeSystem: 'bootstrap',
            defaultAllDay: true,
            events: function (info, successCallback, failureCallback) {
                let user = sessione.profilo.id;
                let project = sessione.progettoAttivo.id;
                //let start = info.start.valueOf();
                //let end = info.end.valueOf();
                let start = info.startStr;
                let end = info.endStr;
                smartAxios.get("/timesheet?user=" + user + "&project=" + project + "&start=" + start + "&end=" + end)
                .then((response) => {
                    console.log(response.data);
                    let prevDate = '';
                    let totDuration = 0;
                    if(response.data.length==0){
                        console.log('no data for this month');
                    }else{
                        successCallback(
                            response.data.map(function (eventEl) {
                                console.log(eventEl);
                                return {
                                    title: eventEl.title,
                                    start: eventEl.start,
                                    color: '#007bff',
                                    textColor: 'white',
                                    allDay: true
                                }
                            }),
                            response.data.forEach(function (element) {
                                let date = new Date(element.start);
                            
                                let year = date.getFullYear();
                                let month = ((date.getMonth()+1).toString().length < 2) ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
                                //let month = date.getMonth()+1;
                                let day = ((date.getDate()).toString().length < 2) ? "0"+(date.getDate()) : (date.getDate());
                                //let day = date.getDate();
                                date= year+'-'+month+'-'+day;
                                if (date == prevDate) {
                                    totDuration = totDuration + element.duration;
                                } else {
                                    prevDate = date;
                                    totDuration = element.duration;
                                }
                                if (totDuration > 8) {
                                    $('#calendar').find('.fc-day[data-date="' + date + '"]').css('background-color', '#FAA732');
                                }
                                console.log(prevDate, totDuration);
                            })
                        )
                        .catch(function(err){
                            console.log(err)
                            $(document).Toasts('create', { autohide: true, delay: 750, title: 'Timesheet',class: 'bg-danger', body:'Error trying to retrieve data'})
                            
                        });
                    }

                });
            }
        });

Answer 1

首先让我们看看错误：

TypeError：successCallback(...) 未定义

该错误意味着您正在尝试调用（作为函数调用）一个实际上未定义的变量

现在让我们看看变量的来源：

function (info, successCallback, failureCallback)

它来自参数，我们无法控制它的传递方式，所以在某些情况下它可能不会作为未定义传递，所以让我们看一下文档：

如果出现某种故障，例如，如果 AJAX 请求失败，则改为调用

failureCallback

。

他们指出，当出现错误时，我们应该调用

failureCallback

，这 could 意味着如果出现错误，不会有

successCallback

现在解决方案： 您可以这样做，仅当它存在时才调用它：

successCallback?.()

但是如果出现错误时返回

failureCallback

会更好

---