3

Tengo un pequeño inconveniente... estoy haciendo un blog con nextjs y firestore. Hasta el momento todo marcha bien. El problema es que tengo un archivo [id].js para cargar las publicaciones de forma dinamica y funciona. El problema es... que cuando intento acceder directamente a la publicacion con la url o recargo la pagina de la publicación no me carga la informacion: Muestra de resultados de recargar pagina

Aqui les dejo el codigo que utilizo:

import React from "react";
import db from "../../firestoreConfig/FirestoreConfig.js";
//Importacion necesaria para capturar los datos del enlace dinamico
import { useRouter } from "next/router";
import PostFooter from "../../components/PostFooter.js";

const Post = () => {
  const [post, setPost] = React.useState([]);

  //Implementacion de useRouter para poder capturar la variable id y poder usarla
  const router = useRouter();
  const { id } = router.query;

  React.useEffect(() => {
    //Variable para establecer en que colleccion debe buscar y el documento a encontrar establecido de forma dinamica
    const docRef = db.collection("fl_content").doc(id);

    //Se obtiene el documento
    docRef
      .get()
      .then((doc) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
          setPost(doc.data());
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
    // eslint-disable-next-line
  }, []);

  return (
    <div className="container is-fluid">
      <div>
        <hr />
        <div>
          <h2 className="title is-2 is-center">{post.titulo} </h2>
          <hr />
        </div>
        <figure className="image is-3by1">
          <img src={post.urlImage} alt={post.descriptionImage} />
        </figure>
        <div dangerouslySetInnerHTML={{ __html: post.contenido }}></div>
      </div>
      <PostFooter autor={post.autor} />
    </div>
  );
};

export default Post;

Como puedo hacer para que cuando recargue o acceda directamente con la url cargue la informacion?


Así modifiqué el codigo:

React.useEffect(async() => {

    //Variable para establecer en que colleccion debe buscar y el documento a encontrar establecido de forma dinamica
    const  docRef = db.collection("fl_content").doc(id);

    //Se obtiene el documento
    await docRef
      .get()
      .then((doc) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
          setPost(doc.data());
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });
    // eslint-disable-next-line
  }, []);
6
  • ¿Puedes confirmar que la variable { id } devuele un valor y no undefined? Commented el 2 feb. 2021 a las 6:48
  • Cuando la cargo desde el enlace me carga el valor pero cuando recargo me arroja primero undefine y luego me arroja el valor pero no carga los datos
    – Mac32
    Commented el 2 feb. 2021 a las 7:14
  • eso es lo que me arroja la consola. Como puede ver en la primera linea me arroja undefine pero luego en la 4 linea me arroja el id de la publicacion que es ESlAAb... pero no me muestra la informacion
    – Mac32
    Commented el 2 feb. 2021 a las 7:18
  • undefined ``` react-dom.development.js?61bb:3942 [Violation] 'requestAnimationFrame' handler took 81ms fouc.js?937a:5 [Violation] 'requestAnimationFrame' handler took 744ms iframe.js:1272 [Violation] 'DOMContentLoaded' handler took 542ms .js?b8bd:13 ``` ESlAAbUMTDjSKdXccoZ5 ``` .js?b8bd:27 No such document! hot-dev-client.js?647e:182 [Fast Refresh] done ```
    – Mac32
    Commented el 2 feb. 2021 a las 7:37
  • Eso es porque la petición a la base de datos de Firebase (como a todas las bases de datos), se realizan de forma asíncrona, siendo necesario esperar a que se obtenga el valor para poder empezar a trabajar con ello. Te recomiendo que emplees async en la función donde tienes la llamada a la base de datos y await en la propia llamada a la base de datos, obligando a la ejecución a "detenerse" y no continuar hasta haber obtenido los resultados necesarios para seguir trabajando. Edit: En tu caso, el async iría delante del () del useEffect y el await, delante de docRef. ... Commented el 2 feb. 2021 a las 8:16

2 respuestas 2

2

La configuracón actual del hook useEffect, es para que solo corra una vez (Skip effects):

React.useEffect(() => {
   //tu codigo...
},[]);

El hook useEffect tiene una dependencia a la variable id, hay que especificarla en el dependency array:

React.useEffect(() => {
      //tu codigo tiene dependencia a id...
      //Variable para establecer en que colleccion debe buscar y el documento a   encontrar establecido de forma dinamica
    const  docRef = db.collection("fl_content").doc(id);
},[id]);

Así, cada que cambie id, el efecto se dispara nuevamente y toma las dependencias especificadas en el dependency array.

Ahora, lo que se menciona con anterioridad, en relación a que la consulta es asincrónica es cierto; sin embargo, en el código original (antes de que lo modificaras con async/await), ya estabas manejando el resultado de la promesa:

//esta operacion devuelve una promesa, esta en docRef
    const docRef = db.collection("fl_content").doc(id);

    //Se obtiene el documento
    docRef
      .get()
      .then((doc) => {
//aqui ya se esta manejando el resultado de la promesa
        if (doc.exists) {
          console.log("Document data:", doc.data());
          setPost(doc.data());
        } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
        }
      })
      .catch(function (error) {
        console.log("Error getting document:", error);
      });

Menciono esto, porque no creo que el problema sea esta pieza de código, pero puedes inentar de tu lado con ambas configuraciones, hasta ver cual te funciona.

Hay que recordar que async/awaitse usa principalmente para escribir el código de una forma más sincrónica; en este caso, los ejemplos de firebase manejan el resultado de la promesa con then y funciones de continuación, tal y como lo tenías configurado en el ejemplo de tu pregunta original.

Espero que esta respuesta sea de ayuda.

2
  • Gracias amigo, eso resolvio el problema. Era algo tan simple.. Muchísimas gracias.
    – Mac32
    Commented el 3 feb. 2021 a las 3:03
  • @Mac32, que bien, también me paso algo similar pero con el react-router, suerte y salud.
    – g.4
    Commented el 3 feb. 2021 a las 4:33
0

Tras investigar un poco, la solución es lo que te dije en los comentarios, pero con una pequeña adaptación:

// Declaramos esto fuera del useEffect para poder usarlo fuera
const [docRef, setDocRef] = React.useState(null);

React.useEffect(() => {
// En vez de poner el async/await en el useEffect, creamos una función que hace lo mismo
    async function fetchApi() {
        setDocRef(db.collection("fl_content").doc(id));

        //Se obtiene el documento
        await docRef
          .get()
          .then((doc) => {
             if (doc.exists) {
                console.log("Document data:", doc.data());
                setPost(doc.data());
             } else {
               // doc.data() will be undefined in this case
                console.log("No such document!");
              }
            })
            .catch(function (error) {
              console.log("Error getting document:", error);
            });
          // eslint-disable-next-line
      }
    // Y antes de terminar el useEffect, llamamos a la función para almacenar los datos.
    fetchApi();
  }, []);
2
  • Ahora me arroja este error: TypeError: Cannot read property 'get' of null
    – Mac32
    Commented el 2 feb. 2021 a las 16:24
  • Revisando un poco el código, imprimo por consola la variable "id" y esa me arroja undefined que es el problema que me mencionaste anteriormente, el detalle esta en que esa variable no la obtengo de firestore, la obtengo de la barra de la url de la pagina con: const router = useRouter(); const { id } = router.query; esta en la parte superior del codigo. No tendiendo porque si la obtengo de la url de la pagina tarda tanto en cargar. Tal vez alli esta el problema pero no se como agregar el await a esa variable, el editor se queja diciendo que no tiene ningun efecto en esa expresion.
    – Mac32
    Commented el 2 feb. 2021 a las 16:44

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.