0

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.

6
  • Parece un problema de deep copy , muestra el código dónde haces el set de post con useState, también revisa la consola para confirmar antes y despues del set, que el estado post contiene toda la información.
    – g.4
    Commented el 22 feb. 2022 a las 17:47
  • 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...
    – jd-1d
    Commented el 22 feb. 2022 a las 19:24
  • Bien, una ultima verificación, da un console.log a response.data antes del setProperty(response.data);, asegúrate de que venga toda la información ahi también, es antes del set.
    – g.4
    Commented el 22 feb. 2022 a las 20:44
  • 1
    Yo te diría que el problema lo busques en otro lado. En el render de los objetos utiliza el encadenamiento opcional así: {post.char?.char1} y {post.group1?.img1}. Tampoco olvides agregar un arreglo de dependencias a tu useEffect: useEffect(() => {...}, [post_id]); Commented el 23 feb. 2022 a las 0:49
  • 1
    @KroneauxSchneider graciasss!! Tras añadir el encadenamiento opcional y el array de dependencias al useEffect se renderiza todo perfectamente! Muchas gracias a ti también @ g.4. Aprovecho para preguntaros... algún consejo para filtrar los post por 'type'??? Es decir, si es de tipo '1' mostrar los de ese tipo y si es de tipo '2' mostrarlos solo los de ese tipo... gracias de antemano!!
    – jd-1d
    Commented el 23 feb. 2022 a las 11:19

1 respuesta 1

0

Yo te diría que el problema lo busques en otro lado. En el render de los objetos utiliza el encadenamiento opcional así:

{post.char?.char1}

y

 {post.group1?.img1}.

Tampoco olvides agregar un arreglo de dependencias a tu useEffect:

useEffect(() => {
  ...
}, [post_id]);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.