Browse Source

♻️ refactor(files): 重构数据获取逻辑和状态更新方式

- 将useQuery的onSuccess回调重构为useEffect依赖监听
- 为客户列表和文件列表添加错误处理逻辑
- 优化状态更新方式,避免直接修改pagination状态
- 导入useEffect钩子用于副作用处理

🐛 fix(files): 修复错误处理缺失问题

- 添加clientsError状态捕获客户列表加载错误
- 添加filesError状态捕获文件列表加载错误
- 实现错误信息展示,使用户了解数据加载失败原因
yourname 8 months ago
parent
commit
ba6f70106f
1 changed files with 36 additions and 19 deletions
  1. 36 19
      src/client/admin/pages/Files.tsx

+ 36 - 19
src/client/admin/pages/Files.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Table, Button, Space, Input, Modal, Form, Upload, Select, DatePicker } from 'antd';
 import { App } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined } from '@ant-design/icons';
@@ -15,16 +15,21 @@ type CreateFileRequest = InferRequestType<typeof fileClient.$post>['json'];
 type UpdateFileRequest = InferRequestType<typeof fileClient[':id']['$put']>['json'];
 
 const Files: React.FC = () => {
-  const {message} = App.useApp();
+  const { message } = App.useApp();
   const [form] = Form.useForm();
   const [modalVisible, setModalVisible] = useState(false);
   const [editingKey, setEditingKey] = useState<string | null>(null);
   const [searchText, setSearchText] = useState('');
   const [clients, setClients] = useState<ClientItem[]>([]);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
   const queryClient = useQueryClient();
   
   // 获取客户列表
-  const { data: clientsData } = useQuery({
+  const { data: clientsData, error: clientsError } = useQuery({
     queryKey: ['clients'],
     queryFn: async () => {
       const response = await clientClient.$get({ query: { page: 1, pageSize: 1000 } });
@@ -32,10 +37,19 @@ const Files: React.FC = () => {
       return await response.json() as InferResponseType<typeof clientClient.$get, 200>;
     },
     staleTime: 5 * 60 * 1000, // 5分钟缓存
-    onSuccess: (result) => {
-      setClients(result.data);
-    },
   });
+
+  useEffect(() => {
+    if (clientsData) {
+      setClients(clientsData.data);
+    }
+  }, [clientsData]);
+
+  useEffect(() => {
+    if (clientsError) {
+      message.error(`获取客户列表失败: ${clientsError instanceof Error ? clientsError.message : '未知错误'}`);
+    }
+  }, [clientsError]);
   
   // 获取文件列表数据
   const fetchFiles = async ({ page, pageSize }: { page: number; pageSize: number }): Promise<FileListResponse> => {
@@ -44,23 +58,26 @@ const Files: React.FC = () => {
     return await response.json() as FileListResponse;
   };
   
-  const [pagination, setPagination] = useState({
-    current: 1,
-    pageSize: 10,
-    total: 0,
-  });
-  
-  const { data, isLoading: loading } = useQuery({
+  const { data, isLoading: loading, error: filesError } = useQuery({
     queryKey: ['files', pagination.current, pagination.pageSize, searchText],
     queryFn: () => fetchFiles({ page: pagination.current, pageSize: pagination.pageSize }),
     keepPreviousData: true, // 保留前一页数据直到新数据加载完成
-    onSuccess: (result) => {
-      setPagination({
-        ...pagination,
-        total: result.pagination.total,
-      });
-    },
   });
+
+  useEffect(() => {
+    if (data) {
+      setPagination(prev => ({
+        ...prev,
+        total: data.pagination.total,
+      }));
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (filesError) {
+      message.error(`获取文件列表失败: ${filesError instanceof Error ? filesError.message : '未知错误'}`);
+    }
+  }, [filesError]);
   
   // 搜索
   const handleSearch = () => {