Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

104
Vistas
Weird behavior when mapping over zipped array containing async data

I'm attempting to grab data from firestore, then grab the url's of images stored in firebase storage, then zip the two pieces of data together so I can send both at once as props to a component. My problem is that when I try to access the second element of my array, it only returns undefined. Here is the section of code in question, where I'm grabbing the data and trying to send it to a component:

...
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>
    </>);
}

When I'm mapping over my state I can access the first element of the array, but the second one only shows undefined. When I console log the singular mapped object I see the correct url and id. Before I even map the state object it still contains all of the correct data. Here is an image of my output on an example run:

enter image description here

All my data is correct, this has to be some semantics issue with javascript I don't understand, some insane asynchronous issue, or something really obvious. This problem, at least to me, seems really low level so I haven't been able to come up with much in terms of solutions.

This has been bugging me for days, I've gone through like 5 different major iterations trying to get these url's to pass properly with zero luck.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda