Descubra cómo resolví el error “`dangerouslySetInnerHTML` no coincidió”, en una aplicación React
Estaba intentando imprimir el HTML contenido en una propiedad, usando dangerouslySetInnerHTML
, mientras recibía este error en la consola del navegador:
Warning: Prop `dangerouslySetInnerHTML` did not match.
Este fue un proyecto de Next.js, pero la solución se aplica a cualquier código React.
La cadena que intentaba imprimir apareció por un rato y luego desapareció. ¡Qué extraño!
Fue aún más extraño cuando intenté imprimir una cadena HTML fija, como esta:
p dangerouslySetInnerHTML={{ __html: 'ptest/p' }}/p
El mensaje de error es críptico, pero después de un tiempo, me di cuenta de que no podía establecer una p
etiqueta dentro de otra p
etiqueta.
Cambiar a:
div dangerouslySetInnerHTML={{ __html: 'ptest/p' }}/div
Funcionó como un encanto.
Tal vez te puede interesar:
- Formularios HTML
- Cómo cargar una imagen en un lienzo HTML
- Cómo utilizar insertAdjacentHTML
- Cómo cambiar la URL de una imagen HTML en modo oscuro
Cómo solucionar el peligroso error SetInnerHTML no coincide en React
Descubra cómo resolví el error “`dangerouslySetInnerHTML` no coincidió”, en una aplicación React
programar
es
https://aprendeprogramando.es/static/images/programar-como-solucionar-el-peligroso-error-setinnerhtml-no-coincide-en-react-2215-0.jpg
2024-10-16
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente