How would I get the data I need from this array?-CodePudding

I am trying to get all the data from my firebase firestore and put it into a javascript react table but I am having a difficult time.

async function GetAllDataOnce() {
  const querySnapshot = await getDocs(collection(db, "repos"));
  var data = [];
  querySnapshot.forEach(doc => {
    data.push({
      id: doc.id,
      data: doc.data()
    })
  })
  return data;
}
var returndata = GetAllDataOnce();

This code gets all the data in a promise. It then returns the promise with all this data, which is good so far. Image of promise return

But once I try and put it into a table and render it with react, it doesn't like it saying that map can't be used on anything but an array, which this data is already.

export function ListData() {
    return (
      <table>
        {returndata.map(returndata => (
          <tr key={returndata.id}>
            <td>{returndata.data}</td>
          </tr>
        ))}
      </table>
    )
  }

Okay so that didn't work, so I try and just get a specific part of the array using

{returndata.data.map...

and it returns undefined. I have been searching all over for this and I have no idea. Any help would be appreciated.

CodePudding user response：

const myComponnetName = () =>{ 
const [dataList,setDataList] = useState([]);


  useEffect( async () =>{
      async function callData(){
         const result = await querySnapshot()
         return result
      }
     setDataList(callData())
   },[])


  async function GetAllDataOnce() {
     const querySnapshot = await getDocs(collection(db, "repos"));
     var data = [];
     querySnapshot.forEach(doc => {
        data.push({
          id: doc.id,
          data: doc.data()
        })
     })
    return data;
  }

 return (
      <table>
        {dataList.map(returndata => (
          <tr key={returndata.id}>
            <td>{returndata.data}</td>
          </tr>
        ))}
      </table>
)




}