date-fns并做出反应-while循环在检查是否给出if条件后再增加1天

问题描述

我使用date-fns创建了带有React挂钩的Calendar， 在本文后面-> https://medium.com/@w.difulvio523/create-a-custom-hooks-calendar-in-react-e50bbba456e1

并添加了显示我从后端获取的schedules的功能。

逻辑是，如果schedule对象date与cloneDay相同， 呈现额外的Link元素，用户可以在其中单击并转到匹配的schedule页面。

问题是schedule是在实际计划的第1天渲染的。

例如如果日期是14日，则将在15日渲染

此问题发生在cell函数内部

    const cells = () => {
        const monthStart = startOfMonth(currentDate) 
        const monthEnd = endOfMonth(monthStart) 
        const startDate = startOfWeek(monthStart,{weekStartsOn: 1}) 
        const endDate = endOfWeek(monthEnd)
        const dateFormat = "d" 
        const rows = []
        let days = []
        let day = startDate 
        let formattedDate = ""

        //here get the schdules
        //and render in cells.
        //if the schduels.date is same as 'day' or 'clone day',//render <Link/> to Exercise element with corresponding ID

        while (day <= endDate) {
            for (let i = 0; i < 7; i++) {
                formattedDate = format(day,dateFormat) 
                const cloneDay = day
            
                //split and reforamt the cloneDay to compare with schedule object's date
                const formatCloneDay = cloneDay.toISOString().split('T')[0]
                // console.log('formatCloneDay',formatCloneDay)

                const scheduleElements = exerciseScheduleArray.map(schedule => {
                    //reformat for the compare with formatCloneday
                    const formatScheduleDate = schedule.date.split('T')[0]

                    const hasMatchingDays = formatScheduleDate.toString() === formatCloneDay.toString()

                    if(hasMatchingDays) {
                        //here it adds 1 day from matching day
                        return (
                            <Link className="schedule-link" to="/exercise/:exerciseId" key={schedule._id}>
                                <span>{schedule.bodySection} {schedule.duration}</span> 
                            </Link>
                        )
                    }
                    else return null
                })

                days.push( 
                    <div
                        className={`column cell ${
                            !isSameMonth(day,monthStart) ? "disabled" : 
                            isSameDay(day,selectedDate) ? "selected" : "" }`}
                        key={day}
                        onClick={() => onClickDate(cloneDay)} 
                    >
                        <span className="number">{formattedDate}</span>
                        <span className="bg">{formattedDate}</span> 
                        {hasSchedules ? scheduleElements : null}
                    </div>
                )
                //this will increase the day value by 1 each time it iterates
                day = addDays(day,1)
            }
            rows.push(
                <div className="row" key={day}> {days} </div>
            )
            //if 7 days has been pushed to the rows,delete the days
            //so it Could start a new row with new days
            days = []
        }
        return <div className="body">{rows}</div> 
    }

我跟踪了'cloneDay'的值，并且此+1行为发生在if语句内部 检查hasMatchingDays的位置。特别是在.map函数中。

                const scheduleElements = exerciseScheduleArray.map(schedule => {
                    //reformat for the compare with formatCloneday
                    const formatScheduleDate = schedule.date.split('T')[0]

                    const hasMatchingDays = formatScheduleDate.toString() === formatCloneDay.toString()

                    if(hasMatchingDays) {
                        //here it adds 1 day from matching day
                        return (
                            <Link className="schedule-link" to="/exercise/:exerciseId" key={schedule._id}>
                                <span>{schedule.bodySection} {schedule.duration}</span> 
                            </Link>
                        )
                    }
                    else return null
                })

我想知道为什么会导致+1天，如何在正确的日期显示时间表？

_

exerciseScheduleArray看起来像这样

解决方法

经过长时间的搜索， 我发现了有关date-fns UTC时区的问题。

如本主题所述， https://github.com/date-fns/date-fns/issues/376

这可能就是为什么cell函数在美国或相同时区的正确日期显示时间表的原因，

并在柏林t.ex渲染第1天。

现在，我将切换到moment.js来重新创建cell函数作为解决方案。 希望这对遇到与我一样的问题的人有所帮助。