• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

207
Vistas
Usar async await para recuperar imágenes del almacenamiento de firebase en reaccionar

Tengo un gancho useEffect con dos funciones dentro, la primera (fetchImages) obtiene todas las imágenes de usuario almacenadas en el almacenamiento de firebase.

El segundo (loadImages) espera a fetchImages y establece la imagen en una matriz de estado. El problema es que la matriz de imágenes regresa vacía a menos que vaya a una página diferente y regrese ... entonces la matriz se llena con las URL de las imágenes.

No estoy seguro de si algo anda mal con mi gancho useEffect o mi ubicación de espera asíncrona, o algo más. La verificación if para currentUser se debe a que currentUser devuelve como nulo en la primera carga.

 const [images, setImages] = useState([]); // All user images from storage useEffect(() => { if (currentUser) { const fetchImages = async () => { setLoading(true) const result = await storage.ref(`images/${currentUser.id}`).listAll(); console.log(result) const urlPromises = result.items.map((imageRef) => imageRef.getDownloadURL() ); console.log(urlPromises) return Promise.all(urlPromises); }; const loadImages = async () => { const images = await fetchImages(); setImages(images); setLoading(false); }; loadImages(); } console.log(loading) }, []); console.log(images, image)

El archivo currentUser userContext

 export const UserContextProvider = ({ children }) => { const [currentUser, setUser] = useState(null); // const [currentUser, setUser] = useState(''); useEffect(() => { let unsubscribeFromAuth = null; unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => { if (userAuth) { const userRef = await createUserProfileDocument(userAuth); userRef.onSnapshot(snapShot => { setUser({ id: snapShot.id, ...snapShot.data() }); }); } else { setUser(null) } }); return () => { unsubscribeFromAuth(); }; }, []) // console.log(unsubscribeFromAuth) const toggleUser = () => { auth.signOut() .then(() => { window.localStorage.clear(); }) .then(() => { setUser(null) }) .catch(e => console.log('There was a error:'(e))) }
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Agregue currentUser a la matriz de dependencias del gancho useEffect . Cuando el estado currentUser del usuario se actualiza, desea que el efecto secundario sea obtener las imágenes relacionadas o borrarlas.

 const [images, setImages] = useState([]); // All user images from storage useEffect(() => { if (currentUser) { const fetchImages = async () => { const result = await storage.ref(`images/${currentUser.id}`).listAll(); const urlPromises = result.items.map((imageRef) => imageRef.getDownloadURL() ); return Promise.all(urlPromises); }; const loadImages = async () => { setLoading(true); try { const images = await fetchImages(); setImages(images); } catch(error) { // handle error, log it, show message, etc... } setLoading(false); }; loadImages(); } else { setImages([]); } }, [currentUser]);
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda