我正在使用reactjs创建一个带有事件的日历,现在当日历显示当前月份时,当我单击下一步时,它显示四月月份,如果我再次单击下一步,则会出现以下错误。



javascript - React.js:TypeError:无法读取未定义的属性 'eventSlots'-LMLPHP

错误出现在一个函数中,在该函数中,我尝试在此处获取事件的日期。

  getDaysWithEvents() {
        // Get all the days in this months calendar view
        // Sibling Months included
        const days = this.getCalendarDays();

        // Set Range Limits on calendar
        this.calendar.setStartDate(days[0]);
        this.calendar.setEndDate(days[days.length - 1]);

        // Iterate over each of the supplied events
        this.props.events.forEach((eventItem) => {

            const eventStart = this.getCalendarDayObject(eventItem.start);
            const eventEnd = this.getCalendarDayObject(eventItem.end);
            const eventMeta = this.getEventMeta(days, eventStart, eventEnd);

            if (eventMeta.isVisibleInView) {
                const eventLength = eventMeta.visibleEventLength;

                console.log("Days", days);

                const eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false); // this line returns error
                //console.log("eventSotsindex", eventSlotIndex);
                let dayIndex = 0;

                // For each day in the event
                while (dayIndex < eventLength) {
                    // Clone the event object so we acn add day specfic data
                    const eventData = Object.assign({}, eventItem);

                    if (dayIndex === 0) {
                         // Flag first day of event
                        eventData.isFirstDay = true;
                    }

                    if (dayIndex === eventLength - 1) {
                        // Flag last day of event
                        eventData.isLastDay = true;
                    }

                    if (!eventData.isFirstDay || !eventData.isLastDay) {
                        // Flag between day of event
                        eventData.isBetweenDay = true;
                    }

                    // Apply Event Data to the correct slot for that day
                   //console.log(eventMeta, dayIndex, days);

                    if (days[eventMeta.firstVisibleDayIndex + dayIndex]) {
                       if (days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots) {
                            days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots[eventSlotIndex] = eventData;

                       }
                    }

                    // Move to next day of event
                    dayIndex++;
                }
            }
        });

        return days;
    }

导致问题的代码行:const eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false);


我需要怎么做才能解决问题?任何帮助或贡献将不胜感激。

最佳答案

eventMeta.firstVisibleDayIndex超出范围(即eventMeta.firstVisibleDayIndex大于或等于days.length)。

一种解决方法是将第一天的索引重置为0,如下所示:

const firstDayIndex = eventMeta.firstVisibleDayIndex < days.length ? eventMeta.firstVisibleDayIndex : 0;

const eventSlotIndex = days[firstDayIndex].eventSlots.indexOf(false);

关于javascript - React.js:TypeError:无法读取未定义的属性 'eventSlots',我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60031615/

10-12 12:33