Array doesnt fill/map() right React

Question

I'm trying to map an array but I think it filled wrong because it gives undefined for the things I added a few things but they come up as undefined for some reasons

if you look at the top its sort of an separate array in the top and the rest will be undefined if I try to get them with .map()

this picture is from a console log here:

           {RuuviTag.map((tag) => (



              <div key={tag.MAC}>
                {console.log(tag.MAC),
                console.log(tag)


                }

                <Marker position={[tag.Latitude.replace(/,/g, '.'), tag.Longitude.replace(/,/g, '.')]} icon={new Icon({
                   iconUrl: tag.colorIcon,
                    iconSize: [25, 41],
                     iconAnchor: [12, 41] })} >
                  <Popup>
                    <h1>{tag.MAC}
                       </h1>
                       <h1>
                       </h1>
                  </Popup>
                </Marker>





              </div>
            ))}\

this is the code where I fill the array:

 async function getData() {
    setLoading(true);

    ref.onSnapshot((querySnapshot) => {
      let items = [];

      querySnapshot.forEach((doc) => {
       
        let item = doc.data()
        console.log(doc.data().RawData)
        PostRawData(doc.data().RawData).then(function (result) {
          console.log(result)
          item.decryptedData = result.data;
        });

        checkBoundaries(doc.data().RawData).then(function (result) {
          console.log(result)
          item.colorIcon = result;
        });
        console.log(item)

        items.push(item);
        console.log(items)

      });

but when I try to map the colorIcon or something from the decrypted data it comeds up as undefined

Does anyone know how to fix this? I couldn't find this issue anywhere

You're using promise syntax `.then`, but you're treating it like it's synchronous. You need to `await` those things instead if you want to treat it like synchronous code. Have a look into how asynchronous code gets treated in the event loop, and promises vs async/await — Jayce444, May 31 '21 at 05:31
Does this answer your question? [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — coagmano, May 31 '21 at 06:51

Yonghoon Lee · Accepted Answer · 2021-05-31T06:45:43.030

1

You should push item after done async functions.

Like this

let item = doc.data()
Promise.all([
  PostRawData(doc.data().RawData),
  checkBoundaries(doc.data().RawData),
]).then(function (result) {
  item.decryptedData = result[0].data;
  item.colorIcon = result[1]
  items.push(item)
})

edited May 31 '21 at 06:45

answered May 31 '21 at 06:36

Yonghoon Lee

2,217
1
12
8

Oh, I will updated without arrow function expression. – Yonghoon Lee May 31 '21 at 06:45

Array doesnt fill/map() right React

1 Answers1