React Native Flat List（Infinite Scroll）从Firebase

Question

我能够使Infinite Scroll与React Native和Firebase一起使用，但是在检索接下来的6个文档时存在一个问题（限制设置为6）。一旦刷新列表的末尾，它将返回另一个6，但这是将相同的6个文档附加到先前的相同6个文档中。

每次渲染6条记录时，我都会增加startAt，并且startAt将以正确的数量增加。不知道我是否缺少某些东西，或者它可能是异步问题？

// Imports: Dependencies

import React, { Component } from "react";

import { ActivityIndicator, Dimensions, FlatList, View, SafeAreaView, StyleSheet } from 'react-native';

import * as firebase from 'firebase';

import 'firebase/firestore';

import firebaseConfig from '../config/config';

// Imports: Components

import UserSelector from '../components/UserSelector';

import TitleLarge from '../components/TitleLarge';

// Screen Dimensions

const { height, width } = Dimensions.get('window');

// Screen: Flat List (Users)

class FlatListUsers extends Component {

  constructor(props) {

    super(props);

    this.state = {

      data: [],

      startAt: 0,

      limit: 6,

      loading: false,

    };

  }

  // Component Will Mount

  componentWillMount = () => {

    // Firebase: Initialize

    firebase.initializeApp({

      apiKey: `${firebaseConfig.apiKey}`,

      authDomain: `${firebaseConfig.authDomain}`,

      databaseURL: `${firebaseConfig.databaseURL}`,

      projectId: `${firebaseConfig.projectId}`,

      storageBucket: `${firebaseConfig.storageBucket}`,

      messagingSenderId: `${firebaseConfig.messagingSenderId}`,

    });

  }

  // Component Did Mount

  componentDidMount = () => {

    this.retrieveUsers();

  }

  // Retrieve Users

  retrieveUsers = async () => {

    try {

      // Set State: Loading

      this.setState({ loading: true });

      // Firebase: Database + Settings

      const db = firebase.firestore();

      // Query

      console.log('Fetching Users')

      const query = await db.collection('users')

                            .where('company', '==', 'Google')

                            .orderBy('first_name')

                            .startAt(this.state.startAt)

                            .limit(this.state.limit);

      // Query Snapshot

      const querySnapshot = await query.get();

Answer 1

Flatlist可能会两次调用您的检索方法。因此，请务必使用loading道具以防止该方法运行。onEndReached={(foo)=>{  if (this.state.loading === false){   this.makeAPizza(foo); }}}

Answer 2

该查询获得相同的结果，因为它始终以相同的偏移量开始：startAt: 0。要解决此问题，请保持pageNumber状态，在用户滚动时继续前进，然后startAt: pageNumber*6关于代码的其他一些注释：状态可以简化...this.state = {  data: [],  limit: 6,  // startAt removed.  start at the end of data  loading: false};不需要retrieveMore。与相同retrieveUsers。 retrieveUsers可以简化...// Retrieve UsersretrieveUsers = async () => {  try {    // Set State: Loading    this.setState({ loading: true });    // Firebase: Database + Settings    const db = firebase.firestore();    // Query    console.log('Fetching Users')    const query = await db.collection('users')                          .where('company', '==', 'Google')                          .orderBy('first_name')                          .startAt(this.state.data.length)                          .limit(this.state.limit);    // Query Snapshot    const querySnapshot = await query.get();    // Document Data    console.log('Document Data');    const documentData = querySnapshot.docs.map(document => document.data());    // console.log(documentData);    // Set State    this.setState({      data: [...this.state.data, ...documentData],      loading: false    })  }  catch (error) {    console.log(error);  }};注意，startAt计算为已检索到的数据的长度。这也适用于数据数组为空的情况。请注意，get第一个或第n个get的在之后更新状态的逻辑是相同的：将新数据追加到现有数据。您不需要retrieveMore。与相同retrieveUsers。 retrieveUsers可以简化...// ...onEndReached={this.retrieveUsers}