在两次成功调用之后，React Native Flat List不调用onEndReached处理程序

Question

我实现了一个非常简单的列表，该列表调用服务器返回包含书籍的页面。每本书都有标题，作者，id，numberOfPages和价格。我使用“平面列表”来进行无限滚动，并且它连续两次很好地完成了工作（加载了前三页），但是后来不再触发处理程序了。

最初，它可以通过获取所有可用页面来很好地工作，但是在我在本地存储中添加了额外的检查之后，它停止了正常工作。如果页面在本地存储中可用并且到那里的时间不超过5秒钟，那么我不会从服务器中获取数据，而是使用缓存的页面。当然，如果没有可用页面或页面太旧，我可以从服务器中获取页面，然后将其保存到本地存储中。（添加与本地存储相关的行为后，出现了问题。）

这是我的组成部分：

export class BooksList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pageNumber: 0
        };
    }

    async storePage(page, currentTime) {
        try {
            page.currentTime = currentTime;
            await AsyncStorage.setItem(`page${page.page}`, JSON.stringify(page));
        } catch (error) {
            console.log(error);
        }
    }

    subscribeToStore = () => {
        const { store } = this.props;
        this.unsubsribe = store.subscribe(() => {
            try {
                const { isLoading, page, issue } = store.getState().books;
                if (!issue && !isLoading && page) {
                    this.setState({
                        isLoading,
                        books: (this.state.books ?
                            this.state.books.concat(page.content) :
                            page.content),
                        issue
                    }, () => this.storePage(page, new Date()));
                }
            } catch (error) {
                console.log(error);
            }
        });
    }

    componentDidMount() {
        this.subscribeToStore();
        // this.getBooks();
        this.loadNextPage();
    }

    componentWillUnmount() {
        this.unsubsribe();
    }

    loadNextPage = () => {
        this.setState({ pageNumber: this.state.pageNumber + 1 },
            async () => {
                let localPage = await AsyncStorage.getItem(`page${this.state.pageNumber}`);
                let pageParsed = JSON.parse(localPage);
                if (localPage && (new Date().getTime() - localPage.currentTime) < 5000) {
                    this.setState({
                        books: (
                            this.state.books ?
                                this.state.books.concat(pageParsed.content) :
                                page.content),
                        isLoading: false,
                        issue: null
                    });
                } else {
                    const { token, store } = this.props;
                    store.dispatch(fetchBooks(token, this.state.pageNumber));
                }
            });

    }

    render() {
        const { isLoading, issue, books } = this.state;
        return (
            <View style={{ flex: 1 }}>
                <ActivityIndicator animating={isLoading} size='large' />
                {issue && <Text>issue</Text>}
                {books && <FlatList
                    data={books}
                    keyExtractor={book => book.id.toString()}
                    renderItem={this.renderItem}
                    renderItem={({ item }) => (
                        <BookView key={item.id} title={item.title} author={item.author}
                            pagesNumber={item.pagesNumber} />
                    )}
                    onEndReachedThreshold={0}
                    onEndReached={this.loadNextPage}
                />}
            </View>
        )
    }
}

在开始时，组件状态下可用的pageNumber为0，因此，当我第一次从服务器加载第一页时，它将在其余调用之前递增。

这是动作fetchBooks（令牌，pageNumber）：

export const fetchBooks = (token, pageNumber) => dispatch => {
    dispatch({ type: LOAD_STARTED });
    fetch(`${httpApiUrl}/books?pageNumber=${pageNumber}`, {
        headers: {
            'Authorization': token
        }
    })
        .then(page => page.json())
        .then(pageJson => dispatch({ type: LOAD_SUCCEDED, payload: pageJson }))
        .catch(issue => dispatch({ type: LOAD_FAILED, issue }));
}

谢谢！