feats

src/components/TableList/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect, useImperativeHandle } from 'react';
+import React, { useCallback, useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { stringify } from 'querystring';
 import { notification } from 'antd';
 import request from '@/utils/request'
@@ -7,56 +7,69 @@ import Pagination from './Pagination';
 
 export default React.forwardRef((props, ref) => {
   const [loading, setLoading] = useState(false)
-  const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: 10, total: 0 })
+  const mounted = useRef(false)
   const [list, setList] = useState()
-  const { api, params = {}, onPageChange, ...tableProps } = props
-  const paramsStr = stringify({
-    ...params,
-    pageNum: pageConfig.current,
-    pageSize: pageConfig.pageSize,
-  })
-
-  const updatePageConfig = useCallback((config) => {
-    const newPage = {
-      ...pageConfig,
-      ...config,
-    }
-
-    setPageConfig(newPage)
+  const [pageTotal, setPageTotal] = useState(0)
+  const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: 10 })
 
-    if (onPageChange) {
-      onPageChange(newPage)
-    }
-  }, [pageConfig])
+  const { api, params = {}, onPageChange, ...tableProps } = props
 
-  const handlePageChange = (current, pageSize) => {
-    const config = pageSize ? { current, pageSize } : { current }
-    updatePageConfig(config)
-  }
+  // 更新分页
+  const updatePage = useCallback(
+    (current, pageSize) => {
+      const config = pageSize ? { current, pageSize } : { current }
+      const newPage = {
+        ...pageConfig,
+        ...config,
+      }
+  
+      setPageConfig(newPage)
+      if (onPageChange) {
+        onPageChange(newPage)
+      }
+    },
+    [pageConfig],
+  )
 
   // 获取远程数据
   const fetchData = useCallback(
     () => {
-      const url = `${api.url}?${paramsStr}`
       setLoading(true)
-      request({...api, url}).then((res) => {
-        const {current, total, records = []} = res
+      const queryParams = {
+        ...params,
+        pageNum: pageConfig.current,
+        pageSize: pageConfig.pageSize,
+      }
+      request({...api, params: queryParams }).then((res) => {
+        const {total, records = []} = res
         setLoading(false)
         setList(records)
-        updatePageConfig({current, total})
+        setPageTotal(total)
       }).catch((err) => {
         console.error(err)
         setLoading(false)
         notification.warn({ message: err.message })
       })
     },
-    [paramsStr, api],
+    [params, pageConfig, api],
   )
 
   // 监控查询参数的修改
   useEffect(() => {
+    // 通过更新分页来触发查询
+    updatePage(1)
+  }, [params])
+  
+  // 监控分页的修改
+  useEffect(() => {
+    // 首次加载不查询
+    if (!mounted.current) {
+      mounted.current = true
+      return
+    }
+
     fetchData()
-  }, [paramsStr])
+  }, [pageConfig])
 
   // 透传给父组件部分方法
   useImperativeHandle(ref, () => ({
@@ -66,7 +79,7 @@ export default React.forwardRef((props, ref) => {
   return (
     <>
       <TableList loading={loading} dataSource={list} {...tableProps} />
-      <Pagination {...pageConfig} onChange={handlePageChange} />
+      <Pagination {...pageConfig} total={pageTotal} onChange={updatePage} />
     </>
   )
 });