我尝试用“NextJs”、“date-fns”和“React-Calendar”做一个新项目,但我在服务器端(nodejs =英语格式)和客户端(法语)之间遇到了渲染日期问题:警告:文本内容不匹配。服务器:《2023年4月》客户端:“avril 2023”.我尝试应用.toLocaleDateString()来格式化服务器端的日期,但它不起作用:(
import { FC, useEffect, useState } from "react";
import ReactCalendar from "react-calendar";
import {add, format} from 'date-fns'
interface indexProps {}
interface DateType {
justDate: Date | null;
dateTime: Date | null;
}
const index: FC<indexProps> = ({}) => {
const [date, setDate] = useState<DateType>({
justDate: null,
dateTime: null,
});
const getTimes = () => {
if(!date.justDate) return
const { justDate } = date
const beginning = add(justDate, {hours: 13})
const end = add(justDate, {hours: 17})
const interval = 60 // in minutes
const times = []
for (let i = beginning; i <= end; i = add(i, {minutes: interval})) {
times.push(i)
}
return times
}
const times = getTimes()
// useEffect(() => setDate(date.toLocaleDateString("fr")), [])
return (
<div className="flex h-screen flex-col items-center justify-center">
{date.justDate ? (
<div className="flex gap-4">
{times?.map((time, i) => (
<div key={`time-${i}`} className='rounded-sm bg-gray-100 p-2'>
<button type="button" onClick={() => setDate((prev) => ({...prev, dateTime: time}))}>
{format(time, 'kk:mm')}</button>
</div>
))}
</div>
) : (
<ReactCalendar
minDate={new Date()}
className="REACT-CALENDAR p-2"
view="month"
onClickDay={(date) =>
setDate((prev) => ({ ...prev, justDate: date }))
}
/>
)}
</div>
);
};
export default index;
提前感谢您的帮助!
1条答案
按热度按时间exdqitrt1#
问题来自ReactCalendar,我需要告诉它将接收的数据类型。为了解决这个问题,我只需添加本地参数(对我来说是法语),就像这样
<ReactCalendar locale='fr'>
,并且没有更多的rerender错误!