score:1

Accepted answer

With set.state.PostsAtt.push, you are mutating the state. Also you are setting the state inside the for loop.

Use setState callback back approach to set the state and make sure to append the data and update the state after for loop.

Like this

InfScroll = () => {
  let db = firebase.firestore();
  let set = this;
  let lastVisible;

  var first = db
    .collection("newPost")
    .orderBy("createdAt", "desc")
    .limit(set.state.PostsAtt.length);
  return first.get().then(function (documentSnapshots) {
    lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];

    var next = db
      .collection("newPost")
      .orderBy("createdAt", "desc")
      .startAfter(lastVisible)
      .limit(3);
    next.get().then((documentSnapshots) => {
      const postAttArr = []; //<----see here
      documentSnapshots.forEach((doc) => {
        postAttArr.push({ data: doc.data(), id: doc.id });
      });
      set.setState(prev => ({ PostsAtt: [...prev.PostsAtt, ...postAttArr] })); //<----see here
    });
  });
};

Side note:

If you don't wan't to deal with things like let set = this; , you can replace return first.get().then(function (documentSnapshots) { with an arrow function

Like this

...
var first = db
    .collection("newPost")
    .orderBy("createdAt", "desc")
    .limit(set.state.PostsAtt.length);
  return first.get().then((documentSnapshots) => { //<---- here
    lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
...

score:1

I believe the problem is over here.

set.setState( { PostsAtt: set.state.PostsAtt.push({ data: doc.data(), id: doc.id }) } );               

Array.push returns the number of items you have on the array after you push. You should push the new data outside setState, or use spread operator

const newPosts = [...set.sta.PostsAtt, { data: doc.data(), id: doc.id }]
set.setState({ PostsAtt: newPosts });

Related Query

More Query from same tag