Que significa o erro Minified React error #425?

É un erro de hidratación: o texto renderizado no servidor non coincide co renderizado no navegador. Adoita estar causado por datas, horas ou valores dependentes do idioma que difiren entre ambos os contornos.

Como arranxar Minified React error #425 (erro de hidratación)

Q: Como se arranxa o erro Minified React error #425?

Engade o atributo suppressHydrationWarning aos elementos cuxo contido difire lexitimamente entre servidor e cliente, ou renderiza ese valor só despois de que o compoñente se montase no cliente.

Resposta rápida

O erro #425 de React ("Text content does not match server-rendered HTML") é un desaxuste de hidratación: o servidor renderizou un valor e o navegador outro, normalmente unha data ou unha hora. A solución máis rápida é engadir o atributo suppressHydrationWarning ao elemento cuxo texto difire lexitimamente entre servidor e cliente, ou renderizar ese valor só cando o compoñente xa se montou.

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>
    );
};