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:
@@ -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>
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
Reference in New Issue
Block a user