我有这个错误,我一直在寻找,这可能发生,因为RBC只接受日期对象,但仍然不能解决它,我的一种新的React。
问题解释:我设置了一个新日期,然后将其添加到localStorage,我从localStorage获取该日期,以便在日历上显示它,但当我切换到周视图或日视图时,它会崩溃并显示该错误。
程式码元件:
const Calendario = ({ nombre, turno }) => {
const [allEvents, setAllEvents] = useState([]);
const handleSelectSlot = useCallback(
({ start, end }) => {
const id = uuidv4();
const title = window.prompt("Turno:");
if (title) {
setAllEvents((prev) => [...prev,{ start: new Date(Date.parse(start)),
end: new Date(Date.parse(end)), title, id }]);
}
},
[allEvents]
);
const locales = {
"es-US": require("date-fns/locale/en-US"),
};
const localizer = dateFnsLocalizer({
format,
parse,
startOfWeek,
getDay,
locales,
});
const saveData = () => {
localStorage.setItem(`${turno}`, JSON.stringify(allEvents));
console.log("guardado");
};
const obtenerDatos = () => {
const items = JSON.parse(localStorage.getItem(`${turno}`));
if (items) {
setAllEvents(items);
}
}
useEffect(() => {
obtenerDatos(allEvents)
}, []);
console.log(allEvents);
return (
<div>
<div className="calendar-subContainer">
<h2>{nombre}</h2>
<div onClick={() => saveData()} className="guardado">
<p className="save-text"> Guardar turno</p>
</div>
</div>
<Calendar
localizer={localizer}
events={allEvents}
startAccessor="start"
endAccessor="end"
onSelectSlot={handleSelectSlot}
selectable
popup={true}
style={{ height: 900, width: 1400, margin: "50px" }}
/>
</div>
我试过设置Date对象的end和start,但仍然没有任何结果,也许我做错了
1条答案
按热度按时间xmakbtuz1#
据我所知,
JSON.parse()
会将原始日期对象转换为字符串。一个可行的解决方案是将每个开始和结束日期转换回Date对象,缺点是它需要一个
.map()
(如果你有很多事件数据,这可能会很昂贵)。以下是完成该操作的方法:
希望能有所帮助!