Estoy tratando de mostrar imágenes de la matriz por su ruta pero obtengo un error
App.js:44 Uncaught nc (in promise) TypeError: Cannot read properties of undefined (reading '_location')
Sé que debo hacer algo con promesas, funciones asíncronas, etc., pero no entiendo nada. A continuación se muestra el código de ejemplo.
const fireBaseApp = initializeApp(firebaseConfig); const storage = getStorage(fireBaseApp); function App() { const [url, setUrl] = useState([]); const [item, setItem] = useState([]); const listRef = ref(storage, "/"); //getting all images from the bucket useEffect(() => { listAll(listRef).then((res) => { res.items.forEach(async (item) => { await setUrl((arr) => [...arr, item]); }); }); }, []); //Trying to download image from array with its' path useEffect(() => { const func = async () => { const download = ref(storage, url[2]._location.path_); await getDownloadURL(download).then((x) => { setItem(x); }); }; func(); }, []); return ( <> <img src={item} /> </> ); }Entonces, ¿alguien puede explicar cómo hacerlo correctamente? Gracias !
Agregue url[2] a la matriz de dependencia useEffect . Pero también verifique si está configurado antes de ejecutar la función asíncrona. Como esto:
useEffect(() => { if(url[2]){ const func = async () => { const download = ref(storage, url[2]._location.path_); await getDownloadURL(download).then((x) => { setItem(x); }); }; func(); } }, [url[2]]);