date-fns 和 react - while 循环在检查给定的 if 语句条件后增加 1 天

Question

我使用 date-fns 创建了一个带有 React hooks 的日历，在这篇文章之后 -> 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 看起来像这样

Answer 1

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

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

这可能是 cell 函数会在美国或相同时区以正确日期呈现时间表的原因，

并会在 t.ex 柏林呈现 day + 1。

现在，我将切换到 moment.js 到 re-create 和 cell 函数作为解决方案。希望这对遇到与我相同问题的人有所帮助。

date-fns 和 react - while 循环在检查给定的 if 语句条件后增加 1 天

date-fns and react - while loop adds 1 more day after checking given if statement condition

javascript

reactjs

date

date-fns