React js 使用 react 钩子从分页 API 获取所有数据

Question

我正在开发一个反应应用程序，用于内部使用的编辑工具。我有一个用例，我需要获取所有分页的项目。问题是所有参数都是我们的后端。有是限制和偏移。但是没有响应标头指示我当前所在的页面。任何知道我应该用我的代码更改什么来获取所有项目的人，这样我就可以运行 skip 并采取直到我获得所有项目以及如何更新skip和异步take以便下一个请求使用正确的参数更新？对于类组件，我会使用 setState 回调吗？

我的代码

const fetchItems = async () => {
try {
const items: any = await itemsService.getItems({
skip: 0,
take: 50,
})
setItems(items)
} catch (error) {
console.log(error)
}
}

Answer 1

在这种情况下，您应该维护 loadMoreFlag 作为组件的状态 喜欢

const [hasLoadMore,setHasLoadMore]=useState(true);//assumeing it will have load more for very first time

之后，您可以像这样在获取调用中使用它

const fetchItems = async () => {
if(!hasLoadeMore)return;
try {
const items: any = await itemsService.getItems({
skip: 0,
take: 50,
})
if(items!==null && items !==undefined){
setHasLoadMore(true);
setItems(items)  
}
else{
setHasLoadMore(false);//if you are requesting the last+1 page y ou will not recive any items
}
} catch (error) {
console.log(error)
}
}

编辑

有关您使用 Skip 和 Take 的评论的回答：

如何使用反应钩子制作等效逻辑？

您可以在函数组件内部声明并与钩子一起使用，例如

const [skip,setSkip]=useState(0);
const [take,setTake]=useState(50);

现在，您可以在需要时使用它们。