refactor: optimize user fetching logic in UsersPageClient component by using useCallback for fetchUsers function

This commit is contained in:
javayhu 2025-07-11 01:38:54 +08:00
parent 9d4fcbe36d
commit 9711d13804

View File

@ -6,7 +6,7 @@ import type { User } from '@/lib/auth-types';
import { useUsersStore } from '@/stores/users-store'; import { useUsersStore } from '@/stores/users-store';
import type { SortingState } from '@tanstack/react-table'; import type { SortingState } from '@tanstack/react-table';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { toast } from 'sonner'; import { toast } from 'sonner';
export function UsersPageClient() { export function UsersPageClient() {
@ -22,39 +22,39 @@ export function UsersPageClient() {
]); ]);
const refreshTrigger = useUsersStore((state) => state.refreshTrigger); const refreshTrigger = useUsersStore((state) => state.refreshTrigger);
useEffect(() => { const fetchUsers = useCallback(async () => {
const fetchUsers = async () => { try {
try { setLoading(true);
setLoading(true); const result = await getUsersAction({
const result = await getUsersAction({ pageIndex,
pageIndex, pageSize,
pageSize, search,
search, sorting,
sorting, });
});
if (result?.data?.success) { if (result?.data?.success) {
setData(result.data.data?.items || []); setData(result.data.data?.items || []);
setTotal(result.data.data?.total || 0); setTotal(result.data.data?.total || 0);
} else { } else {
const errorMessage = result?.data?.error || t('error'); const errorMessage = result?.data?.error || t('error');
toast.error(errorMessage); toast.error(errorMessage);
setData([]);
setTotal(0);
}
} catch (error) {
console.error('Failed to fetch users:', error);
toast.error(t('error'));
setData([]); setData([]);
setTotal(0); setTotal(0);
} finally {
setLoading(false);
} }
}; } catch (error) {
console.error('Failed to fetch users:', error);
fetchUsers(); toast.error(t('error'));
setData([]);
setTotal(0);
} finally {
setLoading(false);
}
}, [pageIndex, pageSize, search, sorting, refreshTrigger]); }, [pageIndex, pageSize, search, sorting, refreshTrigger]);
useEffect(() => {
fetchUsers();
}, [fetchUsers]);
return ( return (
<> <>
<UsersTable <UsersTable