Cada vez que recargo mi aplicación web, la primera vez que intento llamar a getDBRecords() no funciona (el código dentro de la instrucción "then" no se ejecuta), pero luego, si vuelvo a intentarlo de inmediato, funcionará y seguirá funcionando. de ahí en adelante hasta que vuelva a cargar la aplicación.
¿Cómo puedo hacer que la llamada DB funcione la primera vez? ¿Tiene algo que ver con Promises/Async await?
¡Cualquier ayuda es muy apreciada!
firebase.js Instalación/Configuración
import * as firebase from 'firebase' const firebaseConfig = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", measurementId: "", databaseURL: "" }; let app if (firebase.apps.length === 0) { app = firebase.initializeApp(firebaseConfig) } else { app = firebase.app(); } const auth = firebase.auth() const db = firebase.firestore(); export { db, auth };contexto de datos
import React, { useContext, useState, useEffect } from 'react' import { db } from '../../firebase' const DataContext = React.createContext() export function useData() { return useContext(DataContext) } export function DataProvider({ children }) { const [result, setResult] = useState('') function getDBRecords() { setResult('') var results = [] var promise = db.collection("COLLECTION_NAME").where("attr", ">", 10).get() promise.then((querySnapshot) => { querySnapshot.forEach((doc)=>{ results.push(doc.data()) }) setResult(results) }).catch((error) => { console.log("Error getting document:", error); }); return result } const value = { testDBRead, testDBWrite, getLastFew, propSearch } return ( <DataContext.Provider value={value}> {children} </DataContext.Provider> )Debe llamar a su función en useEffect
useEffect(() => { getDBRecords(); },[])Lo descubrí, publicando la respuesta para cualquier otra persona que se encuentre con el problema.
Necesitaba darle a la función then() después de la promesa una función que podría devolver la llamada, creo, no estoy seguro de cómo funciona, pero al pasar la función useState set state a mi useContext() y llamando a esa función dentro de mi función then, los datos son actualizado.
En el archivo screen.js:
// Importing the function from a useContext const { fetchSingleDoc } = useData() const [doc, setDoc] = useState('') // Here I call the fetchSingleProp and pass both the ID of the document I wish to get and the setter function. const handleFetchDoc = (doc_id) => { console.log("Fetching Property: ", x) fetchSingleProp(doc_id, setDoc) }En el archivo DataContext.js:
// The solution for me was to add the setDoc function and call it inside the then call. function fetchSingleDoc(prop_id, setDoc) { var propRef = db.collection("PROD-JOIN").doc(props[prop_id]); propRef.get().then((doc) => { if (doc.exists) { const data = doc.data() setDoc(data) } else { console.log("No such document!"); } }).catch((error) => { console.log("Error getting document:", error); }); }No estoy realmente seguro de lo que está sucediendo, pero creo que la parte de la declaración no ha regresado y, por lo tanto, necesita una función que pueda "devolver la llamada" para devolver el valor al lugar correcto.