🚑 fix: resolve React hooks order violation in pagination components

Fix "Rendered fewer hooks than expected" error caused by conditional hook calls
in createCardProPagination function. The issue occurred when paginationArea was
commented out, breaking React's hooks rules.

**Problem:**
- createCardProPagination() internally called useIsMobile() hook
- When paginationArea was disabled, the hook was not called
- This violated React's rule that hooks must be called in the same order on every render

**Solution:**
- Refactor createCardProPagination to accept isMobile as a parameter
- Move useIsMobile() hook calls to component level
- Ensure consistent hook call order regardless of pagination usage

**Changes:**
- Update createCardProPagination function to accept isMobile parameter
- Add useIsMobile hook calls to all table components
- Pass isMobile parameter to createCardProPagination in all usage locations

**Files modified:**
- web/src/helpers/utils.js
- web/src/components/table/channels/index.jsx
- web/src/components/table/redemptions/index.jsx
- web/src/components/table/usage-logs/index.jsx
- web/src/components/table/tokens/index.jsx
- web/src/components/table/users/index.jsx
- web/src/components/table/mj-logs/index.jsx
- web/src/components/table/task-logs/index.jsx

Fixes critical runtime error and ensures stable pagination behavior across all table components.
This commit is contained in:
t0ng7u
2025-07-20 11:24:04 +08:00
parent 818e34682c
commit 805464e406
8 changed files with 23 additions and 4 deletions

View File

@@ -26,10 +26,12 @@ import TaskLogsFilters from './TaskLogsFilters.jsx';
import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
import ContentModal from './modals/ContentModal.jsx';
import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData.js';
import { useIsMobile } from '../../../hooks/common/useIsMobile.js';
import { createCardProPagination } from '../../../helpers/utils';
const TaskLogsPage = () => {
const taskLogsData = useTaskLogsData();
const isMobile = useIsMobile();
return (
<>
@@ -48,6 +50,7 @@ const TaskLogsPage = () => {
total: taskLogsData.logCount,
onPageChange: taskLogsData.handlePageChange,
onPageSizeChange: taskLogsData.handlePageSizeChange,
isMobile: isMobile,
})}
t={taskLogsData.t}
>