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="100">100</SelectItem>
<SelectItem value="1000">1000</SelectItem>
<SelectItem value="100000">100000</SelectItem>
<SelectItem value="10000">10000</SelectItem>
</SelectContent>
</Select>
<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 {
Account,
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);
try {
const body: ListAccountsBody = {
@@ -103,8 +104,10 @@ export function useAccounts(): UseAccountsReturn {
sort
};
console.log('Sending request with body:', body);
const response = await apiClient.getAccountsList(body);
if (response.code === BusinessCode.Success && response.data) {
console.log('Response received:', response.data.list.length, 'accounts');
setAccounts(response.data.list);
setPagination(prev => ({
...prev,
@@ -118,7 +121,7 @@ export function useAccounts(): UseAccountsReturn {
} finally {
setLoading(false);
}
};
}, [filters, pagination.page, pagination.pageSize, sort]);
// 处理筛选变化
const handleFilterChange = (key: string, value: any) => {
@@ -133,7 +136,12 @@ export function useAccounts(): UseAccountsReturn {
// 处理每页大小变化
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(() => {
fetchAccounts();
}, [filters, pagination.page, pagination.pageSize, sort]);
}, [fetchAccounts]);
// 只在开始时获取统计数据
useEffect(() => {