带有 date-fns 的大日历的错误“日期 [（“get”+ 方法）] 不是函数”答案

【问题标题】：error "date[("get" + method)] is not a function" with Big Calendar with date-fns带有 date-fns 的大日历的错误“日期 [（“get”+ 方法）] 不是函数”
【发布时间】：2022-01-14 02:00:09
【问题描述】：

我不熟悉使用此 API，而且我还不习惯他们的文档。我的日历项目有问题，我将 react-big-calendar 与 date-fns 和 DateTimePicker https://www.npmjs.com/package/react-datetime-picker 一起使用，我使用 DateTimePicker 手动输入标题、开始和结束日期和时间并保存到本地存储中。 Calendar Project

它会成功保存到本地存储中，但是当我在一周和一天中查看它时页面会变成空白，当我尝试检查本地存储时，当我与现有日期和我的测试输入。不知道哪里出错了。

import format from "date-fns/format"
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
import { dateFnsLocalizer } from "react-big-calendar"
import DateTimePicker from "react-datetime-picker/dist/DateTimePicker"
import 'react-datetime-picker/dist/DateTimePicker.css'
import 'react-calendar/dist/Calendar.css'
import 'react-clock/dist/Clock.css'
import { Calendar } from "react-big-calendar"
import 'react-big-calendar/lib/css/react-big-calendar.css'
import events from "../data/events"

const locales ={
"en-US" : require("date-fns/locale/en-US")
}

const localizer = dateFnsLocalizer({
format,
parse,
startOfWeek,
getDay,
locales
})

function Body() {
const [ newEvent, setNewEvent ] = useState({ title: "", start: "", end: ""})
/const [ allEvents, setAllEvents ] = useState(events)/
/const [currentEvent, setCurrentEvent] = useState("")/

const [ allEvents, setAllEvents ] = useState(() => {

    const savedEvents = localStorage.getItem("events")

    if (savedEvents) {
        return JSON.parse(savedEvents)
    } else {
        return events
    }
})

useEffect(() => {
    localStorage.setItem("events", JSON.stringify(allEvents))
}, [allEvents])

function handleAddEvent(e){
    e.preventDefault()
    
    if (newEvent !== "") {
        setAllEvents([
            ...allEvents,
            newEvent
        ])
    }
    
    console.log(newEvent)
    setNewEvent({ title: "", start: "", end: "" })
}  

return (
    <div className="cal-body">
        <div className="picker">
            <input 
                type="text"
                value={newEvent.title} 
                onChange={(e) => setNewEvent({...newEvent, title: e.target.value})}
            />
            <DateTimePicker
                disableClock={true}
                disableCalendar={true}
                selected={newEvent.start}
                dayPlaceholder="dd"
                monthPlaceholder="mm"
                yearPlaceholder="yyyy"
                hourPlaceholder="hh"
                minutePlaceholder="mm"
                onChange={(start) => setNewEvent({...newEvent, start})}
            />
            <DateTimePicker
                disableClock={true}
                disableCalendar={true}
                style={{
                    background: "white"
                }}
                selected={newEvent.end}
                dayPlaceholder="dd"
                monthPlaceholder="mm"
                yearPlaceholder="yyyy"
                hourPlaceholder="hh"
                minutePlaceholder="mm"
                onChange={(end) => setNewEvent({...newEvent, end})}
            />
            <button className="button" onClick={handleAddEvent}>Add</button>
        </div>
        
        <div className="calendar">
            <Calendar
                selectable
                localizer={localizer}
                events={allEvents}
                startAccessor="start"
                endAccessor="end"
                popup="true"
                onSelectEvent={() => setOpenModal(true)}
                style={{ 
                    height: 500, 
                    margin:"50px", 
                    background: "white", 
                    color: "black",
                    border: "2px solid black" }}
            />
        </div>
    </div>
)
}

export default Body

【问题讨论】：

标签： reactjs date-fns react-big-calendar

【解决方案1】：

当 RBC 为日期类型道具之一（date、事件 start 和 end 等）获取除真正的 js Date 实例之外的东西时，就会发生这种情况。从localStorage 获取那些events 你的events 将具有start 和end 日期的字符串值。您需要某种形式的预处理器方法，将它们从 UTC 字符串值转换为真正的 js Date 对象。

【讨论】：