reactjs - Javascript - console data shows length of 2 but contains only one value

Question

I have the following firestore code, which simply appends some object into an array, which is then passed to a react component for populating a list.

 export const getUsers =async (tarinerId) => {
      let data = [];
      try{
      let ref = await db
        .collection("users")
        .orderBy("createdAt")
        .limit(3)
        .get();
    
          if (ref.empty) {
           return new Promise.reject("No User Found")
          }
          ref.forEach(doc => {
     data.push({
              name: doc.data().first_name+" "+doc.data().last_name,
              id: doc.data().id,
              email: doc.data().email,
              createdAt: doc.data().createdAt
            })
}
    console.log(data)
    return Promise.resolve({userData: data})
    } catch(error) {console.log(error}
}       
    

And the userData is passed into a react component. Once upon receiving i want to pop out one last element from the array.

<Component userData={userData.data} />

And inside the Component I am poping out the data.

But the issue is console.log from the function is printing out a length of 4 items, but there are only 3 items inside it.

My first guess is about call by reference, but how come the component pop affects the console.log on the function which gets executed already? Or is there something obvious that I am missing here?

question from:https://stackoverflow.com/questions/66067396/javascript-console-data-shows-length-of-2-but-contains-only-one-value

Answer 1

Your ref might have an empty record. That might be what returning an extra empty object