Cómo solucionar el peligroso error SetInnerHTML no coincide en React

 

 

 

Como solucionar el peligroso error setinnerhtml no coincide en react 1

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 petiqueta dentro de otra petiqueta.

Cambiar a:

div dangerouslySetInnerHTML={{ __html: 'ptest/p' }}/div

Funcionó como un encanto.




Tal vez te puede interesar:

  1. Formularios HTML
  2. Cómo cargar una imagen en un lienzo HTML
  3. Cómo utilizar insertAdjacentHTML
  4. 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

 

Como solucionar el peligroso error setinnerhtml no coincide en react 1
Como solucionar el peligroso error setinnerhtml no coincide en react 1

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

 

 

Update cookies preferences