Question

因此，我基本上已经尝试了数小时来解决此问题，但没有找到解决方案。您看到的是，我当前正在将Firebase用于数据库，并且我想使用react-infinite-scroller来获取新数据。

我有一个Firebase数据库，其中包含“项目”，其中包含许多子目录（唯一键），该子目录由标题，内容以及时间戳组成。我希望能够使用无限滚动器自动显示从数据库中获取的Firebase数据。

我目前确实有四个项目默认显示在我的网站上，但是在滚动时，因此我需要从上一个/最新时间戳加载新帖子，该时间戳将从以下状态保存为“ latestTimestamp”：我的默认负载。因此，我认为我需要不断跟踪和更新“ latestTimestamp”，以便正确地支付新数据。而且，我尝试使用'.orderByChild（'timestamp'）。endAt（this.state.latestTimestamp）.limitToLast（4）'来做到这一点。

奇怪的是，当我创建每次加载都被调用的函数时，有时在第一次页面加载时会被调用多次，有时它只会不断调用无数次。

到目前为止，这是我的代码：

（infiniteProjects是const {infiniteProjects} = this.state。

<InfiniteScroll
   pageStart={0}
   loadMore={this.loadInfinitePosts}
   hasMore={true || false}
   loader={<div className="loader">Loading ...</div>}
   useWindow={true}>
   {infiniteProjects.map((project) => {
       return(
           <div class="col-12 mb-4">
           <h3 class="project-title">{project.title}</h3>
           <p class="project-description">{project.text}</p>
           </div>
  )})}
</InfiniteScroll>

这是loadInfinitePosts：

loadInfinitePosts(timestamp){
    const allInfiniteProjects = [];
    var count = 0;
    databaseProjects.orderByChild('timestamp').endAt(this.state.lastInfiniteTimestamp - 10).limitToLast(3).once('value', (snapshot) => {
        snapshot.forEach((childSnapshot) => {
            count += 1;
            allInfiniteProjects.push({
                text: childSnapshot.val().text,
                timestamp: childSnapshot.val().timestamp,
                title: childSnapshot.val().title,
            });
            if(count == 1){
              console.log(childSnapshot.val().timestamp);
              this.setState(() => {
                return {
                lastInfiniteTimestamp: childSnapshot.val().timestamp
                }
            });
            }
            if(count == 3){
                allInfiniteProjects.reverse();
                this.setState(() => {
                    return {
                    infiniteProjects: allInfiniteProjects
                    }
                });
            }
        })
    });
}

所以基本上，我很难一次显示来自特定时间戳的新帖子，一次4个，同时还要跟踪“最新”时间戳，该时间戳将被重复使用以避免以错误的日期顺序获取无效的帖子。我无法理解它是如何工作的，所以这只是数小时来回尝试的结果。

有人可以帮我解决这个问题吗？非常感谢！

React Firebase Infinite Scroller崩溃/无法打印

0 个答案: