refactor(component): 优化组件列表分页逻辑与状态管理

src/pages/componentDevelopment/componentList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styles from './style/index.module.less';
 import { Button, Divider, Input, Space, Table, Radio, Pagination, Modal, Message } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
@@ -36,10 +36,9 @@ const GlobalVarContainer = () => {
   const [selectComponent, setSelectComponent] = useState(null);
   const [componentData, setComponentData] = useState<ComponentItem[]>([]);
   const [pagination, setPagination] = useState({
-    totalCount: 0,
+    total: 0,
-    pageSize: 10,
+    size: 10,
-    totalPage: 0,
+    current: 1
-    currPage: 1
   });
   const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
@@ -54,6 +53,7 @@ const GlobalVarContainer = () => {
   const [showOffSaleModal, setShowOffSaleModal] = useState(false);
   const [offSaleComponent, setOffSaleComponent] = useState(null);
   const dispatch = useDispatch();
+  const skipNextFetchRef = useRef(false); // 用于跳过下一次由分页变化触发的请求
 
   const menuItems = [
     {
@@ -244,26 +244,33 @@ const GlobalVarContainer = () => {
 
   useEffect(() => {
     if (selectedItem === '我的组件' || selectedItem === '协同组件') {
-      // 当切换菜单或搜索条件变化时，重置到第一页
+      if (pagination.current !== 1) {
-      setPagination({
+        setPagination(prev => ({
-        ...pagination,
+          ...prev,
-        currPage: 1
+          current: 1
-      });
+        }));
-      // 延迟执行搜索，确保分页参数已更新
+      }
-      setTimeout(() => {
+      else {
-        fetchComponentData();
+        // 第一页j就直接请求数据
-      }, 0);
+        fetchComponentData({ current: 1, size: pagination.size });
+      }
     }
-  }, [selectedItem, searchValue]);
+  }, [selectedItem]);
 
   // 监听来自其他页面的搜索关键词
   useEffect(() => {
     const handleNavigateWithSearch = (event: any) => {
       const { searchKeyword } = event.detail || {};
       if (searchKeyword) {
-        // 设置搜索值
+        setSearchValue(searchKeyword);
+        // 标记跳过下一次由分页变化触发的请求
+        skipNextFetchRef.current = true;
+        setPagination(prev => ({
+          ...prev,
+          current: 1
+        }));
         setTimeout(() => {
-          setSearchValue(searchKeyword);
+          fetchComponentData({ current: 1, size: pagination.size, name: searchKeyword });
         }, 500);
       }
     };
@@ -274,7 +281,7 @@ const GlobalVarContainer = () => {
     return () => {
       window.removeEventListener('componentListSearch', handleNavigateWithSearch);
     };
-  }, []);
+  }, [pagination.size]);
 
   // 下架组件
   const componentOffSaleHandler = async (stopInstance: boolean) => {
@@ -383,31 +390,28 @@ const GlobalVarContainer = () => {
       '协同组件': getCooperationComponentList
     };
     try {
-      const params = {
+      const params: any = {
-        currPage: pagination.currPage,
+        current: extraParams.current ?? pagination.current,
-        pageSize: pagination.pageSize,
+        size: extraParams.size ?? pagination.size
-        ...extraParams
       };
 
-      // 如果有搜索关键词，则添加到参数中
+      const searchName = extraParams.name !== undefined ? extraParams.name : searchValue.trim();
-      if (searchValue.trim()) {
+      if (searchName) {
-        params.name = searchValue.trim();
+        params.name = searchName;
       }
 
-      // 如果选择了组件状态，则添加到参数中
+      const status = extraParams.componentStatus !== undefined ? extraParams.componentStatus : componentStatus;
-      if (componentStatus) {
+      if (status) {
-        params.componentStatus = componentStatus.toUpperCase();
+        params.componentStatus = status.toUpperCase();
       }
 
       const res: any = await apiMap[selectedItem](params);
 
-      setComponentData(res.data.list);
+      setComponentData(res.data.records || res.data.list);
-      setPagination({
+      setPagination(prev => ({
-        totalCount: res.data.totalCount,
+        ...prev,
-        pageSize: res.data.pageSize,
+        total: res.data.total || res.data.totalCount
-        totalPage: res.data.totalPage,
+      }));
-        currPage: res.data.currPage
-      });
     } catch (error) {
       console.error('获取组件列表失败:', error);
       Message.error('获取组件列表失败');
@@ -416,40 +420,48 @@ const GlobalVarContainer = () => {
     }
   };
 
-  const handlePageChange = (page: number, pageSize?: number) => {
+  const handlePageChange = (page: number, size?: number) => {
-    setPagination({
+    const newSize = size || pagination.size;
-      ...pagination,
+    setPagination(prev => ({
-      currPage: page,
+      ...prev,
-      pageSize: pageSize || pagination.pageSize
+      current: page,
-    });
+      size: newSize
+    }));
   };
 
-  // 修改分页变化处理函数
+  // 监听分页变化
   useEffect(() => {
+    if (skipNextFetchRef.current) {
+      skipNextFetchRef.current = false;
+      return;
+    }
     if (selectedItem === '我的组件' || selectedItem === '协同组件') {
-      fetchComponentData();
+      fetchComponentData({ current: pagination.current, size: pagination.size });
     }
-  }, [pagination.currPage, pagination.pageSize, componentStatus]);
+  }, [pagination.current, pagination.size, componentStatus]);
 
   // 搜索处理函数
   const searchHandle = () => {
-    // 重置到第一页并触发搜索
+    if (pagination.current !== 1) {
-    setPagination({
+      setPagination(prev => ({
-      ...pagination,
+        ...prev,
-      currPage: 1
+        current: 1
-    });
+      }));
-    fetchComponentData();
+    }
+    else {
+      fetchComponentData({ current: 1, size: pagination.size });
+    }
   };
 
   // 重置搜索
   const resetSearch = () => {
     setSearchValue('');
-    setComponentStatus(''); // 同时重置组件状态筛选
+    setComponentStatus('');
-    setPagination({
+    setPagination(prev => ({
-      ...pagination,
+      ...prev,
-      currPage: 1
+      current: 1
-    });
+    }));
-    fetchComponentData();
+    fetchComponentData({ current: 1, size: pagination.size, name: '', componentStatus: '' });
   };
 
   // 修改导出组件的回调函数
@@ -621,9 +633,9 @@ const GlobalVarContainer = () => {
                 />
                 <div className={styles['pagination-container']}>
                   <Pagination
-                    current={pagination.currPage}
+                    current={pagination.current}
-                    pageSize={pagination.pageSize}
+                    pageSize={pagination.size}
-                    total={pagination.totalCount}
+                    total={pagination.total}
                     onChange={handlePageChange}
                   />
                 </div>