优化组件页面代码

src/components/data-table/component.tsx

@@ -3,11 +3,10 @@ import {
   type ColumnDef,
   flexRender,
   getCoreRowModel,
-  getExpandedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
 import { Loader } from "lucide-react"
-import { type CSSProperties, useCallback, useMemo } from "react"
+import type { CSSProperties } from "react"
 import { Pagination, type PaginationProps } from "@/components/ui/pagination"
 import {
   TableBody,

src/components/data-table/hooks.ts

@@ -1,5 +1,5 @@
 "use client"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { toast } from "sonner"
 import { useStatus } from "@/hooks/data"
 import type { ApiResponse, PageRecord } from "@/lib/api"
@@ -13,15 +13,12 @@ export function useDataTable<T>(
   const [page, setPage] = useState(1)
   const [size, setSize] = useState(10)
   const [total, setTotal] = useState(0)
-  const fetchRef = useRef(fetch)
-  useEffect(() => {
-    fetchRef.current = fetch
-  }, [fetch])
-  const refresh = useCallback(
-    async (_page?: number, _size?: number) => {
+
+  const _refresh = useCallback(
+    async (_page: number, _size: number) => {
       setStatus("load")
       try {
-        const resp = await fetch(_page ?? page, _size ?? size)
+        const resp = await fetch(_page, _size)
         if (!resp.success) {
           throw new Error("获取数据失败")
         }
@@ -37,21 +34,22 @@ export function useDataTable<T>(
         setStatus("fail")
       }
     },
-    [fetch, page, size, setStatus],
+    [fetch, setStatus],
   )
 
-  const onPageChange = (page: number) => {
-    setPage(page)
-  }
+  const onPageChange = useCallback(
+    (page: number) => _refresh(page, size),
+    [_refresh, size],
+  )
 
-  const onSizeChange = (size: number) => {
-    setPage(1)
-    setSize(size)
-  }
+  const onSizeChange = useCallback(
+    (size: number) => _refresh(1, size),
+    [_refresh],
+  )
 
   useEffect(() => {
-    refresh(page, size).then()
-  }, [refresh, page, size])
+    _refresh(1, size)
+  }, [_refresh, size])
 
   return {
     data,
@@ -64,6 +62,8 @@ export function useDataTable<T>(
       onPageChange,
       onSizeChange,
     },
-    refresh,
+    refresh: (_page?: number, _size?: number) => {
+      _refresh(_page ?? page, _size ?? size)
+    },
   }
 }