React Native Flat List（Infinite Scroll）从Firebase

Question

我能够使Infinite Scroll与React Native和Firebase一起使用，但是在检索接下来的6个文档时存在一个问题（限制设置为6）。一旦刷新列表的末尾，它将返回另一个6，但这是将相同的6个文档附加到先前的相同6个文档中。每次渲染6条记录时，我都会增加startAt，并且startAt将以正确的数量增加。不知道我是否缺少某些东西，或者它可能是异步问题？// Imports: Dependenciesimport 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: Componentsimport UserSelector from '../components/UserSelector';import TitleLarge from '../components/TitleLarge';// Screen Dimensionsconst { 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 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.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}