Soy un nuevo codificador autodidacta. Espero estar expresando mi situación adecuadamente.
Estoy tratando de recuperar algunos datos de Cloud Firestore. Creé un enlace personalizado que debería usar State y setDocuments para que sea la "guía" recuperada. La consulta usa useParams para hacer que la identificación coincida con la guía específica que estoy tratando de obtener. Creo que el problema está en querySnapshot. setDocuments no parece estar funcionando. Cuando consuelo registro "documentos" es una matriz vacía.
¿Alguna pista?
import { useParams } from 'react-router-dom' import { collection, query, where, getDocs } from "firebase/firestore"; import { db } from "../firebase/config" import { useEffect } from 'react'; export const useGuide = (c) => { const [documents, setDocuments] = useState([]) const { id } = useParams() useEffect(() => { const ref = collection(db, c) const q = query(ref, where("id", "==", `${id}`)) getDocs(q).then(querySnapshot => { querySnapshot.forEach((doc) => { setDocuments(doc.data()) }); }); }, []) console.log(documents) return { documents } }
Aquí es donde trato de usar el gancho useGuide para establecer el estado que se pasaría a un componente.
import SingleGuide from '../../components/SingleGuide/SingleGuide' import { useGuide } from '../../hooks/useGuide' function Guide() { const { documents: guides } = useGuide('guides') console.log(guides) return ( <div> {guides && <SingleGuide guide={guides}/>} </div> ) } export default Guide
Hay algunos problemas con su código, incluida la configuración de una matriz de documentos igual a un solo documento en los resultados de la consulta. Prueba algo como lo siguiente.
import { useParams } from "react-router-dom"; import { collection, query, where, getDocs } from "firebase/firestore"; import { db } from "../firebase/config"; import { useState, useEffect } from "react"; export const useGuide = (c) => { const [documents, setDocuments] = useState([]); const { id } = useParams(); useEffect(() => { // create array to hold all the individual docs const docs = []; const ref = collection(db, c); const q = query(ref, where("id", "==", `${id}`)); getDocs(q).then((querySnapshot) => { querySnapshot.forEach((doc) => { docs.push(doc.data()); }); setDocuments(docs); }); }, [c]); // could consider passing `id` to the hook instead of useParams and adding that as a dependency to update data automatically console.log(documents); return { documents }; };