我想为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: [...],
...
}
或类似
试试这个解决方案:
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));
});