Реагировать на собственную версию FlatList + Cloud Firestore: функция Query.startAfter () требует допустимый первый аргумент, но он не определен

Question

Мой код работает и извлекает данные (Component Did Mount + retrieveData) из Cloud Firestore и устанавливает состояние, но когда компонент React Native Flat List извлекает дополнительные данные (retrieveMore), мне нужно пройти предыдущее состояние и добавить документданные в this.state.documentData.

База данных состоит из 20 документов с идентификаторами от 1 до 19. Первый запрос извлекает 9 документов, второй должен извлекать 9, а последний запрос возвращает 1 документ (19всего)

Когда список прокручивается до самого низа, flatList будет извлекать дополнительные документы из Cloud Firestore и использовать последний видимый документ из предыдущего запроса в качестве отправной точки.Я могу получить documentData + lastVisible для функции retrieveMore, но не могу понять, почему запрос не будет работать с использованием .startAfter (this.state.lastVisible)

Я получаюследующая ошибка (из функции retrieveMore): Функция Query.startAfter () требует допустимого первого аргумента, но он не определен.

Что работает:

• Работает ComponentDidMount (он вызывает retrieveData и этот запрос работает)
• documentData и lastVisible передаются из retrieveData в retreiveMore с использованием setState + prevState

Гденаходится:

• retrieveMore не может использовать this.state.lastVisible в качестве отправной точки для получения еще 9 дополнительных документов из Cloud Firestore

Вот мой код:

// Imports: Dependencies
import React, { Component } from "react";
import { ActivityIndicator, Dimensions, FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { usersRef } from '../App';

// Imports: Components
import ItemSelector from '../components/ItemSelector';
import Title from '../components/Title';

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

// Screen: InfiniteScroll
export default class InfiniteScroll extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      documentData: [],
      lastVisible: null,
      loading: false,
      refreshing: false,
    };
  }

  // Component Did Mount
  componentDidMount = () => {
    try {
      // Cloud Firestore: Initial Query (Infinite Scroll)
      this.retrieveData()
    }
    catch (error) {
      console.log(error);
    }
  }

  // Retrieve Data
  retrieveData = async () => {
    try {      
      // Set State: Loading
      // this.setState({ loading: true });

      this.setState((prevState) => {
        return ({...prevState, loading: true})
      })
      console.log('Retrieving Data');

      // Cloud Firestore: Query
      let initialQuery = await usersRef
        .where('id', '<=', 20)
        .orderBy('id')
        .limit(9)

      // Cloud Firestore: Query Snapshot
      let documentSnapshots = await initialQuery.get();

      // Cloud Firestore: Document Data
      let documentData = documentSnapshots.docs.map(document => document.data());
      console.log('Document Data (Retrieve Data)');
      console.log(documentData);

      // Cloud Firestore: Last Visible Document (To Start From For Proceeding Queries)
      let lastVisible = documentData[documentData.length - 1];
      console.log('Last Visible (Retrieve Data)');
      console.log(lastVisible);

      // Set State
      this.setState({
        documentData: documentData,
        lastVisible: lastVisible,
        loading: false,
      });
    }
    catch (error) {
      console.log(error);
    }
  }

  // Retrieve More
  retrieveMore = async () => {
    try {
      // Set State: Refreshing
      console.log('Retrieving additional Data');
      this.setState(prevState => ({
        documentData: prevState.documentData,
        lastVisible: prevState.lastVisible,
        refreshing: true,
      }));

      console.log('Previous State: Document Data');
      console.log(this.state.documentData);

      console.log('Previous State: Last Visible (Works Up Until Here. lastVisible works, but it doesn\'t work as the starting point for the additionalQuery)');
      console.log(this.state.lastVisible);

      // Cloud Firestore: Query (Additional Query)
      let additionalQuery = await usersRef
        .where('id', '<=', 20)
        .orderBy('id')
        .startAfter(this.state.lastVisible)
        .limit(9)

      // Cloud Firestore: Query Snapshot
      let documentSnapshots = await additionalQuery.get();

      // Cloud Firestore: Document Data
      let documentData = documentSnapshots.docs.map(document => document.data());
      console.log('Document Data (Retrieve More) (Post 2nd Query)');
      console.log(documentData);

      // Cloud Firestore: Last Visible Document (To Start From For Proceeding Queries)
      let lastVisible = documentData[documentData.length - 1];
      console.log('Last Visible (Retrieve More) (Post 2nd Query)');
      console.log(lastVisible);


      // Set State (Signature)
      this.setState(prevState => ({
        documentData: [...prevState.documentData, documentData],
        lastVisible: lastVisible,
        refreshing: false,
      }));
    }
    catch (error) {
      console.log(error);
    }
  }

  // Render Header
  renderHeader = () => {
    try {
      return (
        <Title title="Items" />
      )
    }
    catch (error) {
      console.log(error);
    }
  };

  // Render Footer
  renderFooter = () => {
    try {
      // Check If Loading
      // if (this.state.loading || this.state.refreshing) {
      if (this.state.loading) {
        return (
          <View style={styles.activityIndicator}>
            <ActivityIndicator />
          </View>
        )
      }
      else {
        return null;
      }
    }
    catch (error) {
      console.log(error);
    }
  };

  // Select Item
  selectItem = (item) => {
    try {
      console.log(`Selected: ${item.first_name}`)
    }
    catch(error) {
      console.log(error);
    }
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          // Data takes in an array
          data={this.state.documentData}
          // Render Items
          renderItem={({ item }) => (
            <ItemSelector
              item={item.first_name}
              // onPress={() => {this.selectItem(item)}}
            />
          )}
          // Element Key
          keyExtractor={(item, index) => String(index)}
          // Header (Title)
          ListHeaderComponent={this.renderHeader}
          // Footer (Activity Indicator)
          ListFooterComponent={this.renderFooter}
          // On End Reached takes in a function
          onEndReached={this.retrieveMore}
          // How Close To The End Of List Until Next Data Request Is Made
          onEndReachedThreshold={0}
          // Refreshing (Set To True When End Reached)
          refreshing={this.state.refreshing}
        />
      </SafeAreaView>
    )
  }
}

// Styles
const styles = StyleSheet.create({
  container: {
    height: height,
    width: width,
  },
  text: {
    fontFamily: 'System',
    fontSize: 16,
    fontWeight: '400',
    color: '#222222',
  },
});

console.log: retrieveData

Retrieving Data
Document Data (Retrieve Data)
Array [
  Object {
    "first_name": "Kristin",
    "id": 1,
    "last_name": "Smith",
  },
  Object {
    "first_name": "Olivia",
    "id": 2,
    "last_name": "Parker",
  },
  Object {
    "first_name": "Jimmy",
    "id": 3,
    "last_name": "Robinson",
  },
  Object {
    "first_name": "Zack",
    "id": 4,
    "last_name": "Carter",
  },
  Object {
    "first_name": "Brad",
    "id": 5,
    "last_name": "Rayburn",
  },
  Object {
    "first_name": "Ashley",
    "id": 6,
    "last_name": "Foster",
  },
  Object {
    "first_name": "Parker",
    "id": 7,
    "last_name": "Trotter",
  },
  Object {
    "first_name": "Kevin",
    "id": 8,
    "last_name": "Carter",
  },
  Object {
    "first_name": "Zack",
    "id": 9,
    "last_name": "Klein",
  },
]
Last Visible (Retrieve Data)
Object {
  "first_name": "Zack",
  "id": 9,
  "last_name": "Klein",
}

console.log: retrieveMore (Работает додо дополнительного запроса)

Retrieving additional Data
Previous State: Document Data
Array [
  Object {
    "first_name": "Kristin",
    "id": 1,
    "last_name": "Smith",
  },
  Object {
    "first_name": "Olivia",
    "id": 2,
    "last_name": "Parker",
  },
  Object {
    "first_name": "Jimmy",
    "id": 3,
    "last_name": "Robinson",
  },
  Object {
    "first_name": "Zack",
    "id": 4,
    "last_name": "Carter",
  },
  Object {
    "first_name": "Brad",
    "id": 5,
    "last_name": "Rayburn",
  },
  Object {
    "first_name": "Ashley",
    "id": 6,
    "last_name": "Foster",
  },
  Object {
    "first_name": "Parker",
    "id": 7,
    "last_name": "Trotter",
  },
  Object {
    "first_name": "Kevin",
    "id": 8,
    "last_name": "Carter",
  },
  Object {
    "first_name": "Zack",
    "id": 9,
    "last_name": "Klein",
  },
]
Previous State: Last Visible (Works Up Until Here. lastVisible works, but it doesn't work as the starting point for the additionalQuery)
Object {
  "first_name": "Zack",
  "id": 9,
  "last_name": "Klein",
}
Document Data (Retrieve More) (Post 2nd Query)
Array []
Last Visible (Retrieve More) (Post 2nd Query)
undefined