React Native中的延迟加载Flatlist Firebase实时数据库

Question

我想使FlatList在滚动到结束时也可以加载更多，当我回到顶部时，我需要准备好物品

我尝试使用startAfter()方法，但是它显示出它不能仅与Firestore一起实时使用，因此，当我滚动到底部以及最后一个键使用startAt()时，查询也无法检索数据它显示错误提示：您应该使用唯一键。

请参见下面的代码：

 componentDidMount = () => {
  this.retrieveData();
}

 retrieveData = async () => {
try {

  let services = await firebase.database().ref('services').orderByKey().limitToLast(5)
  services.on('value', snapshot => {
    let arrayOfKeys = Object.values(snapshot.val())

    referenceToOldestKey = arrayOfKeys[arrayOfKeys.length - 1].serviceKey;
    this.setState({
      dataSource: arrayOfKeys,
      lastVisible: referenceToOldestKey,
    });

  });
}


retrieveMore = async () => {
try {
  this.setState({
    refreshing: true,
  });
  let services = await firebase.database().ref('services').orderByKey().endAt(this.state.lastVisible).limitToLast(6)
  services.on('value', snapshot => {
    let arrayOfKeys = Object.values(snapshot.val())
      .sort()
      .reverse()
      .slice(1);

    referenceToOldestKey = arrayOfKeys[arrayOfKeys.length - 1].serviceKey;

    this.setState({
      dataSource: arrayOfKeys,
      lastVisible: referenceToOldestKey,
      refreshing: false,
    });

  });
}


  render() {
return (
  <View style={styles.container}>
    <FlatList
      data={this.state.dataSource}
      renderItem={({ item }) => (
        <View style={styles.itemContainer}>
          <Text>{item.serviceName}</Text>
        </View>
      )}
      keyExtractor={(item) => item.serviceKey.toString()}
      ListFooterComponent={this.renderFooter}
      onEndReached={this.retrieveMore}
      onEndReachedThreshold={0}
      refreshing={this.state.refreshing}
    />
)

}