React Native setState not working when I loop through an array

Question

I have a state where I store all the uuids of the posts. I am retrieving the uuids of the posts in useEffect() from firebase and looping through the array of uuids and retrieving all the posts that the user made but the posts state is returning an empty array.

useEffect(() => {
  getData();
}, []);

const getData = () => {
  setPosts([]);
  setPostuuids([]);

  firebase
    .firestore()
    .collection("users")
    .doc(uid)
    .get()
    .then((doc) => {
      setPostuuids(doc.data().posts);
    });

postuuids.filter((postuuid) => {
  firebase
    .firestore()
    .collection("posts")
    .doc(postuuid)
    .get()
    .then((doc) => {
      const image = doc.data().image;
      const text = doc.data().text;
      const userid = doc.data().uid;
      const timestamp = doc.data().timestamp;
      const username = doc.data().username;
      const uuid = doc.data().uuid;
      const name = doc.data().name;
      const avatar = doc.data().avatar;

      setPosts((prevPosts) => [
      ...prevPosts,
      {
        image: image,
        timestamp: timestamp,
        text: text,
        name: name,
        userid: userid,
        uuid: uuid,
        username: username,
        avatar: avatar,
       },
      ]);
    });
  });
};

I didn't get deep into your code but take into consideration that setState (with hooks as well) is asynchronous. — D10S
– D10S, Commented Aug 2, 2020 at 9:09

Mohsen Niknam Pirzadeh · Accepted Answer · 2020-08-02 09:29:39Z

1

your postuuids.filter run before request completed, so postuuids is empty. you should use another useEffect() for postuuids.map():

useEffect(() =>{

postuuids.map((postuuid) => {
  firebase
    .firestore()
    .collection("posts")
    .doc(postuuid)
    .get()
    .then((doc) => {
      const image = doc.data().image;
      const text = doc.data().text;
      const userid = doc.data().uid;
      const timestamp = doc.data().timestamp;
      const username = doc.data().username;
      const uuid = doc.data().uuid;
      const name = doc.data().name;
      const avatar = doc.data().avatar;

      setPosts((prevPosts) => [
      ...prevPosts,
      {
        image: image,
        timestamp: timestamp,
        text: text,
        name: name,
        userid: userid,
        uuid: uuid,
        username: username,
        avatar: avatar,
       },
      ]);
    });
  });
};

},[postuuids])

edited Aug 2, 2020 at 9:29

answered Aug 2, 2020 at 9:21

Mohsen Niknam Pirzadeh

4581 gold badge6 silver badges11 bronze badges

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

Comments

Ish · Accepted Answer · 2020-08-02 09:12:56Z

0

Use map method instead of filter to loop through a list.

Best Regards!

answered Aug 2, 2020 at 9:12

Ish

1231 silver badge7 bronze badges

1 Comment

Syed Rajin Over a year ago

I tried the same thing with map and the result is same.

Collectives™ on Stack Overflow

React Native setState not working when I loop through an array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related