setState asynchronous array react native

Question

I am trying to set an array of messages once I have loaded all necessary data from firestore, but it seems I have one too many await/asyncs in there as the output results in

[{"_A": null, "_x": 0, "_y": 0, "_z": null},....]

function loadMessages() {

    const newMessageArray = chatIds.map(async chat => {

      const q = query(collection(db, collections.messages),
        where('chatId', '==', chat.id),
        orderBy("createdAt", 'desc'),
        limit(1)
      );

      return await getDocs(q).then(async querySnapshot => (querySnapshot.docs[0].data()));
    });
    console.log(newMessageArray)
    setMessages(newMessageArray);
  }

How can I fix it in a way that leaves me with a single new array for setMessages?

Gabriel Menezes da Silva · Accepted Answer · 2023-04-13 17:29:45Z

0

The problem is because you're returning a Promise in your return of the .map. You need to solve them.

This link will help you. You'll need to use the Promise.all to solve them.

answered Apr 13, 2023 at 17:29

Gabriel Menezes da Silva

6023 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

setState asynchronous array react native

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related