反应:未捕获的TypeError:无法读取未定义的属性“年”

我正在尝试使用react钩子创建日历,但出现以下错误

Store.js:3661 Uncaught TypeError: Cannot read property 'year' of undefined
    at Function.diff (Store.js:3661)
    at Function.interval (Store.js:3674)
    at Store.js:88850
    at Array.map (<anonymous>)
    at renderCalendarDays (Store.js:88849)
    at EventCalendar (Store.js:88867)
    at renderWithHooks (Store.js:47072)
    at mountIndeterminateComponent (Store.js:49487)
    at beginWork$1 (Store.js:50836)
    at HTMLUnknownEl

这是我的活动日历组件

import React, {useState, useEffect} from 'react';
import {Calendar} from 'calendar-base';
import PropTypes from 'prop-types';
import CalendarEvent from './CalendarEvent';
import CalendarDay from './CalendarDay';
import CalendarTitle from './CalendarTitle';
import moment from 'moment';


const EventCalendar =props=> {

const [today, setToday] = useState(getToday);
const calendar = new Calendar({siblingMonths: true, });

const  getToday =()=>{
    var today = new Date();
    return {
        day: today.getDate(),
        month: today.getMonth(),
        year: today.getFullYear(),
    };
}
   const  getCalendarDays = () => {
        return calendar.getCalendar(props.year, props.month).map((day) => {
            day.eventSlots = Array(props.maxEventSlots).fill(false); 
            return day;
        });
    }

    const getEventMeta =(days, eventStart, eventEnd) =>{

        const eventStartInView = calendar.isDateSelected(eventStart);
        const eventEndInView = calendar.isDateSelected(eventEnd);
        const firstDayOfMonth = days[0];
        const lastDayOfMonth = days[days.length - 1];

        const eventMeta = {
            // Asserts Event is visible in this month view
            isVisibleInView: false,
            visibleEventLength: days.length,
            // Returns the index (interval from first visible day) of [...days] of event's first "visible" day
            firstVisibleDayIndex: eventStartInView ? Calendar.interval(firstDayOfMonth, eventStart) - 1 : 0,
        };

        // Asserts Event is visible in this month view
        if (eventStartInView || eventEndInView) {
             // Asserts event's first or last day is visible in this month view
            eventMeta.isVisibleInView = true;
        } else if (eventStart.month < props.month && eventEnd.month > props.month) {
            // Asserts at least part of month is
            eventMeta.isVisibleInView = true;
        }

        // Determine the visible length of the event during the month
        if (eventStartInView && eventEndInView) {
            eventMeta.visibleEventLength = Calendar.interval(eventStart, eventEnd);
        } else if (!eventStartInView && eventEndInView) {
            eventMeta.visibleEventLength = Calendar.interval(firstDayOfMonth, eventEnd);
        } else if (eventStartInView && !eventEndInView) {
            eventMeta.visibleEventLength = Calendar.interval(eventStart, lastDayOfMonth);
        }

        return eventMeta;
    }

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

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

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

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


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

                //console.log("Days", days); 
                const eventSlotIndex= eventMeta.firstVisibleDayIndex < days.length ? eventMeta.firstVisibleDayIndex : 0;

                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
                    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  getCalendarDayObject =(date) => {
        const dateArray = date.split('-');

        var weekDayName =  moment(dateArray).format('dddd');
        // console.log("weekdayname", weekDayName);
        return {
            year: dateArray[0],
            month: dateArray[1] - 1,
            day: dateArray[2],
            weekDayName:weekDayName
        };
    }

  const  getLastIndexOfEvent =(slots) => {

        const lastIndexOfEvent = slots.map((slot, index) => {
            return slot !== false ? index : false;
        }).filter((element) => {
            return element;
        }).pop();

        return lastIndexOfEvent < 3 || lastIndexOfEvent === undefined ? 2 : lastIndexOfEvent;
    }

  const  getSerializedDay = (day) => {
        return [day.weekDay, day.day, day.month, day.year].join('');
    }

 const   renderDaysOfTheWeek = () =>{
        return props.daysOfTheWeek.map((title, index) => {
            return (
                <CalendarTitle 
                    key={'title_'+ index}
                    title={title} 
                />
            )   
        });
    }

  const  renderEvents =(day)=> {

        // Trim excess slots
        const eventSlots = day.eventSlots.slice(0, getLastIndexOfEvent(day.eventSlots) + 1);

        return eventSlots.map((eventData, index) => {
            return (
                <CalendarEvent 
                    key={'event_'+index+getSerializedDay(day)}
                    day={day}
                    eventData={eventData}
                    onClick={props.onEventClick}
                    wrapTitle={props.wrapTitle}
                    />
            );
        });
    }

  const  renderCalendarDays = ()=>{
        return getDaysWithEvents().map((day, index) => {
            const isToday = Calendar.interval(day, today) === 1;
            console.log(isToday)
            const events = renderEvents(day);

            return (
                <CalendarDay 
                    key={'day_'+getSerializedDay(day)}
                    day={day} 
                    events={events}
                    isToday={isToday} 
                    onClick={props.onDayClick}
                    onMouseOut={props.onEventMouseOut}
                    onMouseOver={props.onEventMouseOver}
                    />
                );
        });
    }



        return (
            <div className="flexContainer">
                {renderDaysOfTheWeek()}
                {renderCalendarDays()}
            </div>
        );
}

EventCalendar.propTypes = {
    daysOfTheWeek: PropTypes.array,
    events: PropTypes.array,
    maxEventSlots: PropTypes.number,
    month: PropTypes.number,
    onEventClick: PropTypes.func,
    onEventMouseOut: PropTypes.func,
    onEventMouseOver: PropTypes.func,
    onDayClick: PropTypes.func,
    wrapTitle: PropTypes.bool,
    year: PropTypes.number,

};

EventCalendar.defaultProps = {
    daysOfTheWeek: [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
    ],
    events: [],
    wrapTitle: true,
    maxEventSlots: 10,
};

export default EventCalendar;

不幸的是,我正在努力解决问题,有人可以帮助我吗?

我的代码在这里有什么问题?

评论