Estoy tratando de obtener datos de firestore, luego tomar las URL de las imágenes almacenadas en el almacenamiento de firebase, luego comprimir los dos datos para poder enviarlos a la vez como accesorios a un componente. Mi problema es que cuando trato de acceder al segundo elemento de mi matriz, solo devuelve indefinido. Aquí está la sección del código en cuestión, donde tomo los datos e intento enviarlos a un componente:
... const [slimes, setSlimes] = useState([]); useEffect(() => { let mounted = true; const getSlimes = async () => { const snap = await getDoc(docRef); if (!snap.exists()) return; // Grab ids, map them into an array let data = snap.data().slimes.map((id) => {return [id]}); // Grab urls, zip with ids data.map(async (id) => { let fetchURL = process.env.REACT_APP_BUCKET + path + id[0] + ".png"; const url = await getDownloadURL(ref(storage, fetchURL)); id.push(url); }); if (mounted) setSlimes(data); }; getSlimes(); return () => { mounted = false; } }, []); if (!slimes.length) { return <LinearProgress />; } else { console.log(slimes); return (<> <div id="inv-header">{discordid}'s Slimes</div> <div id="cards-container"> {slimes.map((slime) => { // Bugged part console.log(slime); console.log(slime[0] + " || " + slime[1]); return (<SlimeCard key={slime[0]} slimeid={slime[0]} url={slime[1]}/>); })} </div> </>); }Cuando estoy mapeando mi estado, puedo acceder al primer elemento de la matriz, pero el segundo solo se muestra indefinido. Cuando registro en la consola el objeto asignado singular, veo la URL y la identificación correctas. Incluso antes de mapear el objeto de estado, todavía contiene todos los datos correctos. Aquí hay una imagen de mi salida en una ejecución de ejemplo:
Todos mis datos son correctos, esto tiene que ser un problema de semántica con javascript que no entiendo, algún problema asincrónico loco o algo realmente obvio. Este problema, al menos para mí, parece de muy bajo nivel, por lo que no he podido encontrar muchas soluciones.
Esto me ha estado molestando durante días, he pasado por 5 iteraciones importantes diferentes tratando de que estas URL se aprueben correctamente sin suerte.