Estoy tratando de mostrar todas las imágenes que he almacenado en el almacenamiento en la nube de Firebase. Aunque puedo ver los enlaces con la ayuda de console.log(fetchUrl) , gracias a Firebase Doc , pero no puedo mostrarlos en mi pantalla. así que pensé en usar el método useState pero aún así no funciona. no sé por qué He visto un resultado que coincide con mi respuesta , pero Firebase v8 y v9 son muy diferentes de esto. Así que por favor ayúdame aquí. Sería de gran ayuda si pudiera traducir la v8 a la v9 desde el enlace anterior para mí.
const [url, setUrl] = useState([]); useEffect(() => { const overviewRef = ref(storage, `behance_projects/${params.id}/`); listAll(overviewRef).then((res) => { res.items.forEach((imageRef) => { getDownloadURL(imageRef).then((fetchUrl) => { setUrl({ urlLink: fetchUrl, }) }) }) }).catch((err)=> { console.log(err) }) }, [params.id]);Así es como traté de mostrar en web.
{ url.map((url, index) =>{ return <img src={url.urlLink} key={index} alt="images" style={{width:"100%", height:"auto"}}/> }) }Si bien la sintaxis modular v9 es diferente, la forma de lidiar con múltiples operaciones asincrónicas sigue siendo la misma: use Promise.all .
En tu caso sería algo como:
listAll(overviewRef).then((res) => { let promises = res.items.map((imageRef) => getDownloadURL(imageRef)); Promise.all(promises).then((urls) => { setUrl({ urlLink: urls, }) }) }).catch((err)=> { console.log(err) }) Ahora se llamará a setUrl cuando se hayan determinado todas las URL de descarga. Luego puede recorrer esas URL en el JSX para representarlas.