fix: 修复分页大小切换不生效的BUG

- 使用useCallback确保fetchAccounts函数正确依赖最新状态
- 修复handlePageSizeChange中的状态更新逻辑
- 将分页选项从100000改为10000,更符合实际使用需求
- 添加调试日志帮助排查问题

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-09-24 05:33:06 +08:00
parent 7aaeffa498
commit 8d02855249
2 changed files with 14 additions and 6 deletions

View File

@@ -72,7 +72,7 @@ export function AccountTable({
<SelectItem value="20">20</SelectItem> <SelectItem value="20">20</SelectItem>
<SelectItem value="100">100</SelectItem> <SelectItem value="100">100</SelectItem>
<SelectItem value="1000">1000</SelectItem> <SelectItem value="1000">1000</SelectItem>
<SelectItem value="100000">100000</SelectItem> <SelectItem value="10000">10000</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<span className="text-sm text-muted-foreground"></span> <span className="text-sm text-muted-foreground"></span>

View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { import {
Account, Account,
ListAccountsBody, ListAccountsBody,
@@ -91,7 +91,8 @@ export function useAccounts(): UseAccountsReturn {
}; };
// 获取账户列表 // 获取账户列表
const fetchAccounts = async () => { const fetchAccounts = useCallback(async () => {
console.log('fetchAccounts called with pagination:', pagination);
setLoading(true); setLoading(true);
try { try {
const body: ListAccountsBody = { const body: ListAccountsBody = {
@@ -103,8 +104,10 @@ export function useAccounts(): UseAccountsReturn {
sort sort
}; };
console.log('Sending request with body:', body);
const response = await apiClient.getAccountsList(body); const response = await apiClient.getAccountsList(body);
if (response.code === BusinessCode.Success && response.data) { if (response.code === BusinessCode.Success && response.data) {
console.log('Response received:', response.data.list.length, 'accounts');
setAccounts(response.data.list); setAccounts(response.data.list);
setPagination(prev => ({ setPagination(prev => ({
...prev, ...prev,
@@ -118,7 +121,7 @@ export function useAccounts(): UseAccountsReturn {
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; }, [filters, pagination.page, pagination.pageSize, sort]);
// 处理筛选变化 // 处理筛选变化
const handleFilterChange = (key: string, value: any) => { const handleFilterChange = (key: string, value: any) => {
@@ -133,7 +136,12 @@ export function useAccounts(): UseAccountsReturn {
// 处理每页大小变化 // 处理每页大小变化
const handlePageSizeChange = (pageSize: number) => { const handlePageSizeChange = (pageSize: number) => {
setPagination({ ...pagination, pageSize, page: 1 }); console.log('handlePageSizeChange called with:', pageSize);
setPagination(prev => {
const newPagination = { ...prev, pageSize, page: 1 };
console.log('Setting new pagination:', newPagination);
return newPagination;
});
}; };
// 处理排序 // 处理排序
@@ -250,7 +258,7 @@ export function useAccounts(): UseAccountsReturn {
// 初始化数据 // 初始化数据
useEffect(() => { useEffect(() => {
fetchAccounts(); fetchAccounts();
}, [filters, pagination.page, pagination.pageSize, sort]); }, [fetchAccounts]);
// 只在开始时获取统计数据 // 只在开始时获取统计数据
useEffect(() => { useEffect(() => {