反应大日历错误 Uncaught TypeError: d[(\"get\" + method)] is not a function答案

【问题标题】：React big Calendar error Uncaught TypeError: d[("get" + method)] is not a function反应大日历错误 Uncaught TypeError: d[(\"get\" + method)] is not a function
【发布时间】：2022-11-27 20:24:26
【问题描述】：

我有这个错误，我一直在寻找，这可能会发生，因为 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>

我已经尝试设置结束和开始日期对象，但仍然没有 o 也许我做错了

【问题讨论】：

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

【解决方案1】：

据我了解，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);
    } 
  }

希望能帮助到你！

【讨论】：