React Firebase Бесконечный скроллер падает / не печатает - PullRequest
Новая
       22

React Firebase Бесконечный скроллер падает / не печатает

0 голосов
/ 27 сентября 2018

Так что я в основном пытался решить эту проблему часами, не находя решения.Видите ли, я в настоящее время использую Firebase для своей базы данных, и я хочу получить новые данные с помощью response-infinite-scroller.

У меня есть база данных Firebase, которая содержит 'Projects', которая содержит многочисленные дочерние каталоги (уникальные ключи), который состоит из заголовка, содержимого и, конечно, метки времени.Я хочу использовать бесконечный скроллер для автоматического отображения данных Firebase, которые извлекаются из моей базы данных.

В настоящее время у меня есть четыре проекта, которые отображаются на моем веб-сайте по умолчанию, но после прокрутки яПоэтому мне нужно загрузить новые сообщения из последней / новейшей отметки времени, которая сохраняется в состоянии «lastTimestamp» из моей загрузки по умолчанию.Итак, я решил, что мне нужно постоянно отслеживать и обновлять «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 за один раз, а также отслеживать «последнюю» отметку времени, которую можно использовать многократно, чтобы избежать извлечения недопустимых сообщений внеправильный порядок дат. Я не могу понять, как это будет работать, так что это всего лишь результат нескольких часов попыток взад и вперед.

Может кто-нибудь помочь мне решить эту проблему?большая благодарность!

...