Cookies
This website uses cookies to improve the user experience, more information on the legal information path.
Notas
0
anos
0
meses
0
días
0
horas
0
minus
0
segus
00
Esta é a imaxe de fondo
1

Erro non detectado: erro de reacción minimizado

Ao usar React, pode atopar o seguinte erro: Uncaught Error: Minified React error visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. Este erro é causado polo uso de datas na aplicación. O erro aparece cando a data e a hora do navegador non teñen o mesmo formato que a data e a hora do servidor.

Como resolvín o problema?

Código co erro

DateAndHour.tsx

const DateAndHour = () => {
const { locale } = useRouter();
const [date, setDate] = React.useState(new Date());
const day = date.toLocaleDateString(locale, { weekday: 'short' });
const dayNumber = date.toLocaleDateString(locale, { day: 'numeric' });
const month = date.toLocaleDateString(locale, { month: 'short' });
const hour = date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
React.useEffect(() => {
const interval = setInterval(() => {
setDate(new Date());
}, 60000);
return () => clearInterval(interval);
}, []);
return (
<div className={styles.dateAndHour}>
<span>{day}</span>
<span>{dayNumber}</span>
<span>{month}</span>
<span>{hour}</span>
</div>
);
};

Código sen o erro

Utilice o atributo suppressHydrationWarning para evitar o erro. Este atributo úsase para evitar o erro cando o servidor e o cliente presentan contido diferente. Pode atopar máis información sobre este atributo na documentación de React.

DateAndHour.tsx

const DateAndHour = () => {
const { locale } = useRouter();
const [date, setDate] = React.useState(new Date());
const day = date.toLocaleDateString(locale, { weekday: 'short' });
const dayNumber = date.toLocaleDateString(locale, { day: 'numeric' });
const month = date.toLocaleDateString(locale, { month: 'short' });
const hour = date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });
React.useEffect(() => {
const interval = setInterval(() => {
setDate(new Date());
}, 60000);
return () => clearInterval(interval);
}, []);
return (
<div className={styles.dateAndHour}>
<span suppressHydrationWarning>{day}</span>
<span suppressHydrationWarning>{dayNumber}</span>
<span suppressHydrationWarning>{month}</span>
<span suppressHydrationWarning>{hour}</span>
</div>
);
};