Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

101
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda