[英]Nextjs Error: Text content does not match server-rendered HTML
I have problem with error Error: Text content does not match server-rendered HTML.我有错误错误的问题:文本内容与服务器呈现的 HTML 不匹配。
so I have dateTime from API for example '2022-12-25T11:22:37.000Z' and I put on component Countdown所以我有来自 API 的 dateTime,例如“2022-12-25T11:22:37.000Z”,我把组件倒计时
but i've got error messages Error: Text content does not match server-rendered HTML.但我收到错误消息错误:文本内容与服务器呈现的 HTML 不匹配。
here my code `这是我的代码`
import React from 'react'
import { Box } from '@mui/material'
import { IFlashBanner } from '../../../interface/flashBanner'
import Countdown from 'react-countdown'
import moment from 'moment'
const FloatingFlashSale = ({
id,
title,
dicount,
countdownTime,
image,
}: IFlashBanner) => {
const a = moment('2022-12-25T11:22:37.000Z').valueOf()
const b = Date.now() + 1000 * 60 * 60 // if using this variable rendering not thorwing error but i want consume from API
const c = new Date('2022-12-25T11:22:37.000Z').valueOf()
return (
<Box
display="flex"
sx={{
backgroundImage: `url(${image})`,
backgroundSize: '100%',
backgroundRepeat: 'no-repeat',
}}
>
<Countdown date={b} />
</Box>
)
}
export default FloatingFlashSale
` `
How I fix not thowring error Error: Text content does not match server-rendered HTML.我如何修复 not throwring error 错误:文本内容与服务器呈现的 HTML 不匹配。
I read valid values on Countdown on docs but still error here lib I used https://github.com/ndresx/react-countdown我在文档上阅读了倒计时的有效值,但我使用的 lib 仍然出错https://github.com/ndresx/react-countdown
hope you help me希望你能帮助我
Thanks谢谢
first you convert your ISOString to Date首先将 ISOString 转换为 Date
const date = new Date('2022-12-25T11:22:37.000Z'); // you don't need valueOf
then然后
<Countdown date={date} />
I don't know why you add 3600000 to your date我不知道你为什么要在日期上加上 3600000
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.