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