Question

我正在与Cloud Firestore合作，目前我想对所有可用记录进行分页。我有一个餐厅列表，并且我正在使用React-native-snap-carousel组件来浏览从DB获取的每个餐厅。目前，我正在一次获取所有餐厅，我们都知道那不是一件好事，我需要分页。我需要一次获取3家餐厅，因此每次用户滑动轮播时，我都需要获取3家下一家餐厅。

这是我要实现的代码，但会引发此错误

“ startAt（）提供的参数过多。参数数目必须小于或等于orderBy（）子句的数量。”

this.state = {
        loading: false,
        city: '',
        All: [],
        itemsPerPage: 3
    };

componentDidMount() {
    this.getRestaurants();
}

componentDidUpdate(prevProps, prevState) {
    const isDifferentPage = this.state.All !== prevState.All
    if (isDifferentPage) this.getRestaurants()
  }

getRestaurants = () => {
    const {All, itemsPerPage} = this.state;
    const startAt = All * itemsPerPage - itemsPerPage;
    const ref = firebase.firestore().collection('restaurants').startAt(startAt).limit(itemsPerPage);

    ref.onSnapshot((querySnapshot => {
        const data = querySnapshot.docs.map(doc => doc.data());
        var newArr = [];
        var newDataArray = [];


        for (i = 0; i < data.length; i++) {

            newArr.push(data[i]);
            this.setState({
                All: newArr
            })   
       }
    }))

}

更多详细信息：

Firestore中的数据是动态的，它们将一直保持更新状态，因此我需要用户在前面查看最新的“餐厅”，并且在滚动（滑动）时需要先获取数据。在已经显示的其他3个之后再增加3个。

如何使用React-Native对Cloud-Firestore进行分页？

0 个答案: