Sigo recibiendo un error que dice "Error de hidratación porque la interfaz de usuario inicial no coincide con lo que se representó en el servidor".
No tengo idea de qué está causando el error, así que esperaba que alguien más supiera qué es lo que está mal. Creo que reduje el lugar donde está ocurriendo el error y publiqué el código debajo de donde creo que se rompe. Si se necesita más código, hágamelo saber.
Gracias de antemano por toda la ayuda.
import React, { useEffect } from "react"; import styles from "../../styles/Home.module.css"; import Coin from "../Coin/Coin"; type CoinListProps = { coins: any; }; const CoinList = ({ coins }: CoinListProps) => { useEffect(() => { console.log(coins); }, []); return ( <div className={styles.coinList}> <table> <tr> <th>Coin</th> <th>Price</th> <th>24h</th> </tr> {coins.map((coin: any, index: any) => ( <Coin key={index} coin={coin} /> ))} </table> </div> ); }; export default CoinList;Creo que probablemente te perdiste a tbody en table . Esto provocará un error en NextJS . Probar:
<table> <tbody> <tr> <th>Coin</th> <th>Price</th> <th>24h</th> </tr> {coins.map((coin: any, index: any) => ( <Coin key={index} coin={coin} /> ))} </tbody> </table>Si desea suprimir una advertencia de hidratación en un componente determinado, puede pasarle la propiedad de suppressHydrationWarning de Advertencia de hidratación.
Esto le indica a React que el contenido del componente puede ser diferente una vez que la página se vuelve a representar en el lado del cliente e ignorar el error.
<Coin key={index} coin={coin} suppressHydrationWarning />Consulte Suprimir advertencia de hidratación (React Docs) :
Si establece suprimirHydrationWarning en verdadero, React no le advertirá sobre discrepancias en los atributos y el contenido de ese elemento. Solo funciona un nivel de profundidad y está diseñado para usarse como una escotilla de escape. No lo use en exceso. Puedes leer más sobre la hidratación en la documentación de ReactDOM.hydrateRoot().