对未定义的代码和框“格式”做出反应 js dateFns 问题答案

【问题标题】：React js dateFns problem on codesandbox 'format' of undefined对未定义的代码和框“格式”做出反应 js dateFns 问题
【发布时间】：2020-01-14 13:30:06
【问题描述】：

错误：

Cannot read property 'format' of undefined

代码错误：

<span>{dateFns.format(currentDate, dateFormat)}</span>

Link

代码：

import React, { useState } from "react";
import dateFns from "date-fns";
import "./Calendar.css";
const Calendar = () => {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState(new Date());
  const header = () => {
    const dateFormat = "MMMM YYYY";
    return (
      <div className="header row flex-middle">
        <div className="column col-start">
          <div className="icon" onClick={prevMonth}>
            chevron_left
          </div>
        </div>
        <div className="column col-center">
          <span>{dateFns.format(currentDate, dateFormat)}</span>
        </div>
        <div className="column col-end">
          <div className="icon" onClick={nextMonth}>
            chevron_right
          </div>
        </div>
      </div>
    );
  };
  const days = () => {
    const dateFormat = "ddd";
    const days = [];
    let startDate = dateFns.startOfWeek(currentDate);
    for (let i = 0; i < 7; i++) {
      days.push(
        <div className="column col-center" key={i}>
          {dateFns.format(dateFns.addDays(startDate, i), dateFormat)}
        </div>
      );
    }
    return <div className="days row">{days}</div>;
  };
  const cells = () => {
    const monthStart = dateFns.startOfMonth(currentDate);
    const monthEnd = dateFns.endOfMonth(monthStart);
    const startDate = dateFns.startOfWeek(monthStart);
    const endDate = dateFns.endOfWeek(monthEnd);
    const dateFormat = "D";
    const rows = [];
    let days = [];
    let day = startDate;
    let formattedDate = "";
    while (day <= endDate) {
      for (let i = 0; i < 7; i++) {
        formattedDate = dateFns.format(day, dateFormat);
        const cloneDay = day;
        days.push(
          <div
            className={`column cell ${
              !dateFns.isSameMonth(day, monthStart)
                ? "disabled"
                : dateFns.isSameDay(day, selectedDate)
                ? "selected"
                : ""
            }`}
            key={day}
            onClick={() => onDateClick(dateFns.parse(cloneDay))}
          >
            <span className="number">{formattedDate}</span>
            <span className="bg">{formattedDate}</span>
          </div>
        );
        day = dateFns.addDays(day, 1);
      }
      rows.push(
        <div className="row" key={day}>
          {" "}
          {days}{" "}
        </div>
      );
      days = [];
    }
    return <div className="body">{rows}</div>;
  };
  const nextMonth = () => {
    setCurrentDate(dateFns.addMonths(currentDate, 1));
  };
  const prevMonth = () => {
    setCurrentDate(dateFns.subMonths(currentDate, 1));
  };
  const onDateClick = day => {
    setSelectedDate(day);
  };
  return (
    <div className="calendar">
      <div>{header()}</div>
      <div>{days()}</div>
      <div>{cells()}</div>
    </div>
  );
};
export default Calendar;

你能给我一些建议吗？

【问题讨论】：

您找到解决问题的方法了吗？

标签： javascript reactjs codesandbox

【解决方案1】：

您必须从 date-fns/esm 导入 Format。像这样：

import {format} from "date-fns/esm"

【讨论】：

我觉得应该是import {format} from "date-fns"
在以前的 date-fns 版本中，我们可以像您共享的那样导入，但在新版本中，如果我们使用 Ecmascript 6，我们必须从 ESM 目录中导入它。

【解决方案2】：

这里的问题在于 import

在这种情况下，您需要

删除import dateFns from "date-fns";
然后从您需要导入的所有方法中删除dateFns：

{dateFns.format(currentDate, dateFormat)}

正确版本：

 {format(currentDate, dateFormat)}

也应该这样做

let startDate = dateFns.startOfWeek(currentDate);

正确版本：let startDate = startOfWeek(currentDate); 等其他方法。

从“date-fns”导入您的案例中使用的所有方法：

进口{ 格式，开始周，添加天数，月开始，月底，周末结束，同月，是同一天，解析，次月， addMonths } 来自“日期-fns”；

完成这些步骤后，它将起作用！

【讨论】：