1

tengo un pequeño inconveniente, esto realizando un blog con nextjs y firestore, obtengo la informacion de firestore y la cargo al estado pero por alguna razon cuando trato de renderizar la informacion me lanza undefine. Cuando coloco un console.log() para mostrar los datos antes del metodo return() me muestra uno o varios arrays vacios y luego me muestra arrays con la informacion. El detalle es cuando intento renderizar la informacion me crashea la pagina. Les dejo el codigo:

import React, {useEffect, useState} from "react"
import db from "../firestoreConfig/FirestoreConfig.js"

export default function About () {
  const [datos, setDatos] = useState([])

    useEffect(() => {
        db.collection("fl_content")
        .where("_fl_meta_.schema", "==", "sobreMi")
        .get().then(
            (snapShots) => {
                setDatos(
                    snapShots.docs.map(
                        (doc) => {
                            return {id: doc.id, data: doc.data()};
                        }
                    )
                );
            }
        );
        

    });
    return (
        <div className="columns container is-fluid">

      <div className="column is-one-quarter">

      <figure className="image image is-4by5">
          {console.log(datos[0].data.imagen)}
          <img src={datos[0].data.imagen} />
      </figure>

      </div>

      <div className="column ">

      <h4 className="title is-4">Sobre mi</h4>
    <div className="content">
      <p className="is-medium">
      </p>
    </div>
      </div>

      </div>
    );
}

aqui el error que me lanza:

introducir la descripción de la imagen aquí

2 respuestas 2

1

Cuando tu objeto se monta en el DOM su variable de estado datos se inicializa en un array vacío, tal y cómo dice en: useState([]). Por lo tanto, debes de incorporar una lógica de inicialización para esto... El useEffect traerá los datos de la base de datos en algún momento dado de tiempo, pero antes de eso no se puede acceder datos[0].data porque no existe, la variable datos corresponde a un array vacío.

Generalmente se genera código para este caso de inicialización, algo cómo así:

import React, {useEffect, useState} from "react"
import db from "../firestoreConfig/FirestoreConfig.js"

export default function About () {
  const [datos, setDatos] = useState([])

    useEffect(() => {
        db.collection("fl_content")
        .where("_fl_meta_.schema", "==", "sobreMi")
        .get().then(
            (snapShots) => {
                setDatos(
                    snapShots.docs.map(
                        (doc) => {
                            return {id: doc.id, data: doc.data()};
                        }
                    )
                );
            }
        );
        

    });
    return (
        <div className="columns container is-fluid">

      <div className="column is-one-quarter">

     {
      (datos !== []) :
      
      ( <figure className="image image is-4by5">
          {console.log(datos[0].data.imagen)}
          <img src={datos[0].data.imagen} />
      </figure>) 
      ?
       (<p> Cargando imagen desde la base de datos...</p>)
     }

      </div>

      <div className="column ">

      <h4 className="title is-4">Sobre mi</h4>
    <div className="content">
      <p className="is-medium">
      </p>
    </div>
      </div>

      </div>
    );
}

En este ejemplo si los datos siguen con su valor de inicialización se renderiza un texto qué indique que la imágen se está cargando.

2
  • Hola amigo, muchas gracias por tu ayuda. Me sigue lanzando el mismo error. A que se debera?
    – Mac32
    Commented el 24 ene. 2021 a las 23:52
  • Oh disculpa! Puse la condición mal, es !== y no ===. La edité para que te funcione
    – FranAcuna
    Commented el 25 ene. 2021 a las 1:16
0

Asi logré resolver el problema:

{
       (datos && datos !== undefined && datos.length !== 0) ?

       ( <figure className="image image is-4by5">
          <img src={datos[0].data.imagen} />
      </figure>) 
       :
       ( 
       <figure className="image image is-4by5">
           <p> else</p>
           {console.log("else")}
       </figure>
       ) 
      }

basicamente lo que tenia que hacer era comprobar que el array no estuviera vacio con: data.lenght !== 0 y listo!

2
  • 1
    Pon atención a datos && datos!===undefined, la primera incluye a la segunda... Si datos fuese undefined se considera un falsy value y daría false. Esto quiere decir que no necesitas hacer esto, con solo datos como condición obtienes la misma funcionalidad. Además en tu código como usas map para cambiar su valor e inicializas su valor como una array vacío, la variable nunca adquirirá un valor de undefined
    – FranAcuna
    Commented el 25 ene. 2021 a las 1:20
  • ok amigo muchas gracias por tu ayuda y los consejos. Ya corrijo el codigo
    – Mac32
    Commented el 25 ene. 2021 a las 1:59

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.