Javascript 列表分页

我试图让FlatList从Firestore获得20篇文章，并呈现20篇。当结束时，我想调用

getPosts

方法来获取接下来的20篇文章，这意味着我必须有一种方法来保存最后一个已知的

光标。这就是我在将类组件转换为挂钩时试图做的事情

有人能帮帮我吗，没有人回答我最后一个问题

const Posts = (props) => {
  //How to get 20 posts from firebase and then render 20 more when the end is reached 
  const [allPosts, setAllPosts] = useState();
  const [loading, setLoading] = useState(true)
  const [isRefreshing, setRefreshing] = useState(false);

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

  const getPosts = async () => {
    try {
      var all = [];
      const unsubscribe = await firebase
        .firestore()
        .collection("Posts")
        .orderBy("timestamp",'desc')
        .get()
        .then((querySnapshot) => {
          querySnapshot.docs.forEach((doc) => {
            all.push(doc.data());
          });
          setLoading(false);
        });
      setAllPosts(all);
      if(currentUser === null){
        unsubscribe()
      }
    } catch (err) {
      setLoading(false);
    }
  };

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    getPosts()
      .then(() => {
        setRefreshing(false);
      })
      .catch((error) => {
        setRefreshing(false); // false isRefreshing flag for disable pull to refresh
        Alert.alert("An error occured", "Please try again later");
      });
  }, []);

  return (
      <FlatList
        data={allRecipes}
        refreshControl={
          <RefreshControl
            refreshing={isRefreshing}
            onRefresh={onRefresh}
          />
        }
        initialNumToRender={20}
        keyExtractor={(item, index) => item.postId}
        renderItem={renderItem}
      />
  );
}

const Posts=（道具）=>{
//如何从firebase获得20篇文章，然后在到达终点时再渲染20篇
const[allPosts，setAllPosts]=useState（）；
常量[loading，setLoading]=useState（true）
常量[isRefreshing，setRefreshing]=使用状态（false）；
useffect（（）=>{
getPosts（）；
}, []);
const getPosts=async（）=>{
试一试{
var all=[]；
const unsubscribe=等待firebase
.firestore（）
.收集（“员额”）
.orderBy（“时间戳”，“描述”）
.get（）
.然后（（querySnapshot）=>{
querySnapshot.docs.forEach（（doc）=>{
all.push（doc.data（））；
});
设置加载（假）；
});
setAllPosts（全部）；
如果（currentUser==null）{
退订
}
}捕捉（错误）{
设置加载（假）；
}
};
const onRefresh=useCallback（（）=>{
设置刷新（真）；
getPosts（）
.然后（（）=>{
设置刷新（假）；
})
.catch（（错误）=>{
setRefreshing（false）；//false isRefreshing标志用于禁用拉取刷新
Alert.Alert（“发生错误”，“请稍后再试”）；
});
}, []);
返回(
item.postId}
renderItem={renderItem}
/>
);
}
const Posts=（）=>{
const[posts，setPosts]=useState（）；
const[data，setData]=useState（）；
const addPosts=posts=>{
setData（{…数据，…帖子}）
//'setData'是异步的，直接使用posts
setPosts（Object.values（posts.sort）（（a，b）=>a.timestamp
您需要在此处添加滚动事件侦听器

比如：

const Posts = (props) => {
  useEffect(() => {
   window.addEventListener('scroll', () => {
    if (window.scrollY >= (document.body.offsetHeight + window.innerHeight)) {
     // fetch more posts here
    }
   });
  });

  // ...rest of the codes
}

您具体遇到了什么问题？请详细描述。我正在尝试使用
setData（）设置数据状态
和
setPosts
我在堆栈上看到了这段代码，但因为我不擅长使用类组件，所以我正在尝试将其转换为函数components@VietDinh我更新了这个问题，你的
render（）
方法中有什么？哇，好吧，那么我应该在哪里添加它呢，到
getPosts
函数，或者？我正在变得未定义不是一个函数
窗口。addEventListener
您可能还需要添加一个，以防止侦听器同时触发是的，因为我的答案是错误的抱歉，我错过了事件类型谢谢您的建议，但我不知道如何添加一个去抖动
const Posts = (props) => {
  useEffect(() => {
   window.addEventListener('scroll', () => {
    if (window.scrollY >= (document.body.offsetHeight + window.innerHeight)) {
     // fetch more posts here
    }
   });
  });

  // ...rest of the codes
}