Creé una aplicación de reacción simple usando componentes funcionales. El componente principal es 'Sitios' mientras que el componente secundario es 'Ver sitios'. Tengo esta función en mi padre (componente Sitios)
function getSitesDB() { ref.onSnapshot((querySnapshot) => { const items = []; querySnapshot.forEach((doc) => { items.push(doc.data()); }); return items; }); }Quiero llamar a esta función desde mi componente secundario (ver sitios) y obtener el valor de retorno. para eso he representado mi componente hijo como este,
<Route exact path="/sites"> <ViewSites getSitesDB={getSitesDB}></ViewSites> </Route>Y llamó a la función usando accesorios del componente secundario como este,
useEffect(() => { setLoading(true); const returnVal = props.getSitesDB(); setLoading(false); }, []);Obtengo esta variable returnVal como indefinida, pero esta función llama a la función principal correctamente. Solo quiero saber cómo recuperar el valor de retorno. Por favor ayúdenme ya que soy nuevo en reaccionar.
actualmente, no está devolviendo nada de la función getSitesDB() , y no puede porque solo obtiene acceso a querySnapshot cuando se llama a la devolución de llamada, puede intentar devolver una promise de getSitesDB() y resolverla con items cuando la devolución de llamada se llama, algo como esto:
function getSitesDB() { return new Promise((resolve, reject)=> { ref.onSnapshot((querySnapshot) => { const items = []; querySnapshot.forEach((doc) => { items.push(doc.data()); }); resolve(items); }); }) } y luego en su useEffect() , .then() a la función como esta,
useEffect(() => { setLoading(true); props.getSitesDB().then(returnVal => { // set returnVal to some state here so you can use it somewhere else in your component // =>> setState(returnVal) setLoading(false); }) }, []);No estoy seguro de si funcionará bien, porque no sé de dónde viene ese 'onSnapshot', parece que escucha un evento y llama a la devolución de llamada cada vez (puede ser más de una vez) ocurre algún cambio, en en ese caso, podría arrojar un error ya que la promesa ya se habría resuelto en la llamada inicial.
lea más sobre promesas aquí en mdn
Al llamar a getSitesDB , debe devolver los elementos que obtuvo de la función onSnapshot de onSnapshot . la función onSnapshot ignora sus artículos devueltos...
Para obtener los datos, debe hacer algo como esto:
function getSitesDB() { return new Promise((resolve, reject) => { const items = []; ref.onSnapshot((querySnapshot) => { querySnapshot.forEach((doc) => items.push(doc.data())); resolve(items); }); }); } Para admitir el desmontaje en su useEffect , debe hacer algo como esto:
useEffect(() => { let canceled = false; const fetchData = async () => { setLoading(true); const sitesData = await getSitesDB(); if (!canceled) { setSitesData(sitesData); setLoading(false); } } fetchData(); return () => { canceled = true; } }, [getSitesDB]);Puedes lograrlo de muchas maneras. 1 Redux 2 API de contexto 3 Forma tradicional (Pase esa función como accesorios en el componente principal)
Siempre que obtenga la función como accesorios en el componente, puede usar la forma de mención a continuación
useEffect(() => { const returnValue = props.funtionMentionInParent(); console.log(returnValue) }, []);
Gracias