No sé qué está pasando, pero incluso después de usar async y esperar la palabra clave, la longitud sigue siendo cero. Gracias por adelantado.
const commercial_shoots = []; let test; React.useEffect(() => { async function fetchData() { const app_ref = ref(storage, "Home/"); await listAll(app_ref) .then((res) => { res.items.forEach((itemRef) => { getDownloadURL(itemRef).then((url) => { commercial_shoots.push({ img: url }); }); }); }) .catch((error) => { console.log(error); }); } fetchData(); }, []); return <div>{commercial_shoots.length}</div>; };React solo vuelve a renderizar el componente cuando se actualiza el state o las props . Aquí, solo está actualizando una variable local. Entonces, incluso cuando se actualiza, la interfaz de usuario no refleja el cambio.
La solución sería utilizar commercialShoots como estado en el componente.
const CommercialShoots = () => { const [commercialShoots, setCommercialShoots] = useState([]); useEffect(() => { async function fetchData() { try { const app_ref = ref(storage, "Home/"); const res = await listAll(app_ref); const downloadUrls = await Promise.all(res.items.map(itemRef) => getDownloadURL(itemRef)); const mappedUrlsToImg = downloadUrls.map((url) => ({ img: url }); setCommercialShoots(mappedUrlsToImg); } catch (error) { console.error(error); } } fetchData(); }, []); return <div>{commercial_shoots.length}</div>; }; NOTA : dado que estamos usando async / await extensamente, me tomé la libertad de actualizar .then() a la sintaxis async / await await.