Question

我想为Hacker News API收到的项目创建一个分页。接收到的数据包含500个故事ID，每页显示10个项目

据我所知，该API没有服务器端分页

到目前为止，我已在redux中获取数据

axios
      .get(`${API_URL}/topstories.json`)
      .then(response => {
        dispatch(getAllTopStoriesIsLoading(false));
        dispatch(getAllTopStoriesSuccess(response.data));

        const itemsPerPage = 10;
        const itemCount = response.data.length;
        const totalPages = Math.ceil(itemCount / itemsPerPage);
      })

我试图在 .then

中设置一个for循环

let startIndex = 0;
for (let i = 1; i <= totalPages; i + 1) {
  itemsOnPage = response.data.slice(startIndex, startIndex + itemsPerPage)
  startIndex += itemsPerPage;
}

这将导致无限循环。

我希望将项目存储在redux存储中，

pages: {
1: [ {...}, {...}, {...}],
2: [...],
...
}

或类似

Answer 1

尝试以下解决方案：

axios
  .get(`https://hacker-news.firebaseio.com/v0/topstories.json`)
  .then(response => {
    //dispatch(getAllTopStoriesIsLoading(false));
    let page = 1;
    const itemsPerPage = 10;
    const responData = {};
    response.data.map(item => {
      if (!responData[page]) {
        responData[page] = [];
      } else if (responData[page].length >= itemsPerPage) {
        current++;
        responData[page] = [];
      }
      responData[current].push(item);
    });
    console.log('===responData===', responData);
    //dispatch(getAllTopStoriesSuccess(responData));
  });

如何通过API接收的数组在Redux中创建分页

1 个答案: