时间戳

首页 > 解决方案 > React js 使用反应钩子从分页 api 中获取所有数据

reactjs - React js 使用反应钩子从分页 api 中获取所有数据

问题描述

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

我的代码

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

      setItems(items)

    } catch (error) {
      console.log(error)
    }
  }

标签： reactjsaxiosreact-hooks

解决方案

在这种情况下，您应该将 loadMoreFlag 保持为组件的状态，例如

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

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

  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 and take 的评论：

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

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

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

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

推荐阅读