如何解决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
函数作为解决方案。
希望这对遇到与我一样的问题的人有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。