Estoy trabajando con Reactjs y usando el marco nextjs, el contenido HTML (description_front) muestra datos bien en localhost Aquí está la respuesta api (consola)
Object id: "55" description_front: "<h3><strong>The crypto revolution and its effects</strong></h3>"pero cada vez que trato de mostrar el contenido "html" en el servidor (vercel) a través de la API, recibo los siguientes datos en mi consola, pero cada vez que intento mostrar "description_front" en la página web, recibo el siguiente error
Cannot read properties of undefined (reading 'description_front')Aquí está mi código, ¿dónde estoy equivocado?
import Axios from "axios"; import {useRouter} from "next/router"; const Post = ({ post }) => { const router = useRouter(); const htmlString = post.description_front; return ( <> <div className="product-des" dangerouslySetInnerHTML={{ __html: htmlString }} /> <> ); };Al obtener datos de localhost, es probable que la obtención sea muy rápida, lo que significa que los datos se obtendrán incluso antes de que se complete el procesamiento de la página, y el código original funcionará como se suponía.
Pero cuando se obtiene desde un servidor remoto, lleva más tiempo, por lo que el proceso de representación se realizará antes de que se obtengan los datos, y post.description_front será nulo, lo que está causando este error.
La solución será verificar si el valor es nulo antes de renderizar, por lo que una sola línea será: const htmlString = post?.description_front en lugar de const htmlString = post.description_front