在 React 中处理 Themoviedb 的分页请求答案

【问题标题】：Handling pagination requests the Themoviedb in React在 React 中处理 Themoviedb 的分页请求
【发布时间】：2021-04-22 16:03:22
【问题描述】：

我正在从 Themoviedb 提取数据，现在您每页只能检索 20 个结果。我正在构建一个电影评分应用程序，用户可以在其中对出现在屏幕上的电影进行评分。一次放映一部电影。当用户浏览第 1 页的前 20 部电影时，我想自动运行第 2 页的新请求以获取下一个电影列表。我不希望用户必须单击一个按钮来加载更多电影，或者有一个“下一页”按钮或类似的东西。一切都应该在同一页面上并自动加载。

现在我在 ComponentDidMount() 中发出请求，将电影列表加载到一个数组中并将其存储在我的状态中，我通过跟踪数组索引来点击电影。当我到达数组的末尾时，我想再次请求第 2 页。这就是我遇到问题的地方。我的初始请求在 ComponentDidMount() 中，所以我不太确定如何处理第二个请求。有什么方法可以在不单击按钮的情况下触发它？我想要前 20 个结果的数组为空时，从下一页请求结果。一次 array.length === 0 再次调用 ComponentDidMount() 会是不好的做法吗？

我的状态：

    state = {
    currentMovieIndex: 0,
    filteredMovieList: [],
    currentPage: 1,
}

我的要求：

getAllMovies(page) {
        return fetch(`https://api.themoviedb.org/3/discover/movie?api_key=2bb6427016a1701f4d730bde6d366c84&page=${page}`)
            .then(res => 
                (!res.ok)
                    ? res.json().then(e => Promise.reject(e))
                    : res.json())
    },

componentDidMount() {
Promise.all([
        MovieService.getMyMovies(),
        MovieService.getAllMovies(this.state.currentPage)
    ]).then(([arr1, arr2]) => {

        // filter out movies that the user has already rated
        let myMovieIds = []; 
        arr1.map(movie => { 
            myMovieIds.push(movie.id); 
        })
        
        let filteredMovies = arr2.results.filter(val => !myMovieIds.includes(val.id))
 
        this.setState({
            filteredMovieList: filteredMovies,
        });
    })
}

【问题讨论】：

标签： javascript reactjs themoviedb-api

【解决方案1】：

如果您想实现没有“下一页”按钮或其他点击触发器的分页逻辑，我认为您应该去搜索“光标分页”逻辑。

您应该获取滚动事件并计算位置并在滚动到达特定位置时调用更多或下一个数据。

（抱歉，没有找到任何好的例子！）

【讨论】：