[英]React js dateFns problem on codesandbox 'format' of undefined
錯誤:
Cannot read property 'format' of undefined
代碼錯誤:
<span>{dateFns.format(currentDate, dateFormat)}</span>
代碼:
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;
你能給我一些建議嗎?
您必須從 date-fns/esm 導入格式。 像這樣:
import {format} from "date-fns/esm"
這里的問題是導入
在這種情況下,您需要
import dateFns from "date-fns";
刪除import dateFns from "date-fns";
然后從您需要導入的所有方法中刪除dateFns
:
{dateFns.format(currentDate, dateFormat)}
正確版本:
{format(currentDate, dateFormat)}
同樣應該做
let startDate = dateFns.startOfWeek(currentDate);
正確版本: let startDate = startOfWeek(currentDate);
等與其余的方法。
從“date-fns”導入您的案例中使用的所有方法:
導入 { format, startOfWeek, addDays, startOfMonth, endOfMonth, endOfWeek, isSameMonth, isSameDay, parse, subMonths, addMonths } from "date-fns";
完成這些步驟后,它將起作用!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.