Просмотр исходного кода

🐛 fix(redemptions-table): correct initial page index and pagination state

Summary:
The redemption list occasionally displayed an invalid range such as “Items -9 - 0” and failed to highlight page 1 after a refresh. This was caused by the table being initialized with `currentPage = 0`.

Changes:
• update `useEffect` to load data starting from page 1 instead of page 0
• refactor `loadRedemptions` to accept `page` (default 1) and sanitize backend‐returned pages (`<= 0` coerced to 1)
• keep other logic unchanged

Impact:
Pagination text and page selection now show correct values on first load or refresh, eliminating negative ranges and ensuring the first page is properly highlighted.
t0ng7u 8 месяцев назад
Родитель
Сommit
ab32e15a86
1 измененных файлов с 4 добавлено и 30 удалено
  1. 4 30
      web/src/components/table/RedemptionsTable.js

+ 4 - 30
web/src/components/table/RedemptionsTable.js

@@ -270,15 +270,12 @@ const RedemptionsTable = () => {
   const [showEdit, setShowEdit] = useState(false);
   const [compactMode, setCompactMode] = useTableCompactMode('redemptions');
 
-  // Form 初始值
   const formInitValues = {
     searchKeyword: '',
   };
 
-  // Form API 引用
   const [formApi, setFormApi] = useState(null);
 
-  // 获取表单值的辅助函数
   const getFormValues = () => {
     const formValues = formApi ? formApi.getValues() : {};
     return {
@@ -299,15 +296,15 @@ const RedemptionsTable = () => {
     setRedemptions(redeptions);
   };
 
-  const loadRedemptions = async (startIdx, pageSize) => {
+  const loadRedemptions = async (page = 1, pageSize) => {
     setLoading(true);
     const res = await API.get(
-      `/api/redemption/?p=${startIdx}&page_size=${pageSize}`,
+      `/api/redemption/?p=${page}&page_size=${pageSize}`,
     );
     const { success, message, data } = res.data;
     if (success) {
       const newPageData = data.items;
-      setActivePage(data.page);
+      setActivePage(data.page <= 0 ? 1 : data.page);
       setTokenCount(data.total);
       setRedemptionFormat(newPageData);
     } else {
@@ -340,17 +337,8 @@ const RedemptionsTable = () => {
     }
   };
 
-  const onPaginationChange = (e, { activePage }) => {
-    (async () => {
-      if (activePage === Math.ceil(redemptions.length / pageSize) + 1) {
-        await loadRedemptions(activePage - 1, pageSize);
-      }
-      setActivePage(activePage);
-    })();
-  };
-
   useEffect(() => {
-    loadRedemptions(0, pageSize)
+    loadRedemptions(1, pageSize)
       .then()
       .catch((reason) => {
         showError(reason);
@@ -421,20 +409,6 @@ const RedemptionsTable = () => {
     setSearching(false);
   };
 
-  const sortRedemption = (key) => {
-    if (redemptions.length === 0) return;
-    setLoading(true);
-    let sortedRedemptions = [...redemptions];
-    sortedRedemptions.sort((a, b) => {
-      return ('' + a[key]).localeCompare(b[key]);
-    });
-    if (sortedRedemptions[0].id === redemptions[0].id) {
-      sortedRedemptions.reverse();
-    }
-    setRedemptions(sortedRedemptions);
-    setLoading(false);
-  };
-
   const handlePageChange = (page) => {
     setActivePage(page);
     const { searchKeyword } = getFormValues();