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))) }
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]);