想写个类似useRequest的小程序分页hooks，大佬们来解？

Question

发现小程序中很多列表都需要上拉加载分页，每个页面都需要维护各种状态，心智负担太大，想写个自定义hook。大概的实现想法如下,我太菜了写不出来，求大佬来解（用的taro+react，不是vue哦）

const { data,isLoad,loading,getNextPageData,refresh } = usePageData({
  api:WorkOrderApi.getClientWorkOrderList, //后端的列表请求方法
  params:{
    page:1,
    pageSize:10
  }, //需要携带的参数
});

data:列表数据,
getNextPageData:上拉加载时调用此方法，自增page，将请求的数据合并到data，并页面更新data，getNextPageData可以传额外的参数 如果传了page按传的，没传按自增的
refresh:重新用初始参数加载
isLoad:是否加载完全，可以用后端返回的total判断或者用每次getNextPageData请求的返回的数据是否小于pageSize 如果加载完全 返回true并且调getNextPageData不生效
loading:是否加载中

Answer 1

tanstack-query
这个库你可以试试

Answer 2

由于提供的信息有限，用TypeScript写了一个简略版本的，希望对你有所帮助。

import { useEffect, useMemo, useState } from "react";

export interface Params {
  page: number;
  pageSize: number;
}
export interface Props {
  api: (params: Params) => Promise<any>;
  params: Params;
}

export function usePageData({ api, params }: Props) {
  const [pageParams, setPageParams] = useState<Params>(params);
  const [total, setTotal] = useState(0);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const isLoad = useMemo(() => {
    return total <= (pageParams.page + 1) * pageParams.pageSize;
  }, [total]);
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const response = await api(pageParams);
      setData(response.data);
      setTotal(response.total);
      setLoading(false);
    };
    fetchData();
  }, [pageParams]);
  const getNextPageData = (params: Params) => {
    if (isLoad) return;
    const nextPage = params.page ? params.page : pageParams.page + 1;
    setPageParams((params) => ({ ...params, page: nextPage }));
  };
  const refresh = () => {
    setPageParams(params);
  };
  return {
    data,
    loading,
    isLoad,
    getNextPageData,
    refresh,
  };
}