javascript React大日历错误未捕获TypeError:d[(“get”+方法)]不是函数

pobjuy32  于 2022-11-27  发布在  Java
关注(0)|答案(1)|浏览(129)

我有这个错误,我一直在寻找,这可能发生,因为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,但仍然没有任何结果,也许我做错了

xmakbtuz

xmakbtuz1#

据我所知,JSON.parse()会将原始日期对象转换为字符串。

一个可行的解决方案是将每个开始和结束日期转换回Date对象,缺点是它需要一个.map()(如果你有很多事件数据,这可能会很昂贵)。
以下是完成该操作的方法:

const obtenerDatos = () => {
   const items = JSON.parse(localStorage.getItem(`${turno}`));
    if (items) {
      const events = items.map(item => ({
       ...item,
       start: new Date(item.start),
       end: new Date(item.end)
      }))
      setAllEvents(events);
    } 
  }

希望能有所帮助!

相关问题