Estoy con un proyecto de React y tengo un problema a la hora de mostrar ciertos datos. Tengo un documento dinámico json en MONGODB con el siguiente formato.
A la hora de mostrar todo el grupo de publicaciones, no hay problemas, para ello, he usado useState([]) y se muestran todo el grupo de publicaciones con sus respectivos datos.
Pero a la hora de mostrar una sola publicación de forma individual usando useState({}), el valor de post.title se muestra pero el de post.char.char1 o post.group1.img1 me aparece un error en consola Uncaught TypeError: Cannot read properties of undefined (reading 'img1').
¿Alguna de ayuda para poder resolver este problema? Gracias de antemano!
[
{
"type": "1",
"title": "Lorem",
"description": "Lorem ipsum dolor sit,",
"group1": {
"img1": "/assets/lorem1.jpg",
"img2": "/assets/loremvilla.jpg",
"img3": "/assets/lorem.jpg"
},
"char": {
"char1": "lorem",
"char2": "lorem",
"char3": "lorem"
},
"gallery": {
"img1": "/assets/lorem1.jpg",
"img2": "/assets/lorem1.jpg"
}
}
]
El set de post:
const EachPost = () => {
const { post_id } = useParams();
const [post, setPost] = useState({});
useEffect(() => {
const fetchPost = async () => {
const response = await axios.get('http://localhost:5000/api/post/${post_id}');
setProperty(response.data);
};
fetchPost();
});
El post contiene la info ya que el título (<h2>{post.title}</h2>)
puedo mostrarlo sin problemas. Cuando obtengo el error es al acceder a los objetos.
post
conuseState
, también revisa la consola para confirmar antes y despues del set, que el estadopost
contiene toda la información.const EachPost = () => { const { post_id } = useParams(); const [post, setPost] = useState({}); useEffect(() => { const fetchPost = async () => { const response = await axios.get( 'http://localhost:5000/api/post/${post_id}' ); setProperty(response.data); }; fetchPost(); });
El post contiene la info ya que el título (<h2>{post.title}</h2>) puedo mostrarlo sin problemas. Cuando obtengo el error es al acceder a los objetos...response.data
antes delsetProperty(response.data);
, asegúrate de que venga toda la información ahi también, es antes del set.{post.char?.char1}
y{post.group1?.img1}
. Tampoco olvides agregar un arreglo de dependencias a tu useEffect:useEffect(() => {...}, [post_id]);