AI: 调试会友管理组件

src/hooks/useMemberManagement.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Member } from '../types/member';
 import { message } from 'antd';
 import { fetchMembers, addMember, updateMember, deleteMember } from '../services/memberService';
@@ -8,21 +8,23 @@ export const useMemberManagement = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    loadMembers();
-  }, []);
-
-  const loadMembers = async () => {
+  const loadMembers = useCallback(async () => {
     setLoading(true);
     try {
       const fetchedMembers = await fetchMembers();
       setMembers(fetchedMembers);
+      console.log('Members loaded:', fetchedMembers);
     } catch (error) {
+      console.error('Failed to load members:', error);
       message.error('加载会友列表失败');
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    loadMembers();
+  }, [loadMembers]);
 
   const showModal = () => {
     setIsModalVisible(true);
@@ -40,8 +42,10 @@ export const useMemberManagement = () => {
     try {
       const newMember = await addMember(member);
       setMembers([...members, newMember]);
+      message.success('会友添加成功');
     } catch (error) {
-      throw error;
+      console.error('Failed to add member:', error);
+      message.error('添加会友失败');
     }
   };
 
@@ -53,6 +57,7 @@ export const useMemberManagement = () => {
       ));
       message.success('会友信息更新成功');
     } catch (error) {
+      console.error('Failed to update member:', error);
       message.error('更新会友信息失败');
     }
   };
@@ -63,6 +68,7 @@ export const useMemberManagement = () => {
       setMembers(members.filter(member => member.id !== memberId));
       message.success('会友删除成功');
     } catch (error) {
+      console.error('Failed to delete member:', error);
       message.error('删除会友失败');
     }
   };

src/pages/MemberManagement.tsx

@@ -17,6 +17,8 @@ const MemberManagement: React.FC = () => {
     deleteMember 
   } = useMemberManagement();
 
+  console.log('MemberManagement rendering', { members, loading, isModalVisible });
+
   return (
     <div>
       <h1>会友管理</h1>
@@ -25,12 +27,14 @@ const MemberManagement: React.FC = () => {
       </Button>
       {loading ? (
         <Spin size="large" />
-      ) : (
+      ) : members.length > 0 ? (
         <MemberList 
           members={members} 
           onEdit={editMember} 
           onDelete={deleteMember} 
         />
+      ) : (
+        <p>暂无会友数据</p>
       )}
       <AddMemberModal 
         visible={isModalVisible} 

src/services/memberService.ts

@@ -1,43 +1,44 @@
 import axios from 'axios';
 import { Member } from '../types/member';
 
-const API_URL = '/api/members'; // 假设这是您的API端点
+const API_URL = '/api/members';
+
+// 模拟 API 延迟
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+// 模拟会友数据
+let mockMembers: Member[] = [
+  { id: '1', name: '张三', idNumber: '310000199001011234', phone: '13800138000' },
+  { id: '2', name: '李四', idNumber: '310000199201022345', phone: '13900139000' },
+];
 
 export const fetchMembers = async (): Promise<Member[]> => {
-  try {
-    const response = await axios.get(API_URL);
-    return response.data;
-  } catch (error) {
-    console.error('Error fetching members:', error);
-    throw error;
-  }
+  await delay(500); // 模拟网络延迟
+  console.log('Fetched members:', mockMembers);
+  return mockMembers;
 };
 
 export const addMember = async (member: Omit<Member, 'id'>): Promise<Member> => {
-  try {
-    const response = await axios.post(API_URL, member);
-    return response.data;
-  } catch (error) {
-    console.error('Error adding member:', error);
-    throw error;
-  }
+  await delay(500);
+  const newMember = { ...member, id: Date.now().toString() };
+  mockMembers.push(newMember);
+  console.log('Added member:', newMember);
+  return newMember;
 };
 
 export const updateMember = async (member: Member): Promise<Member> => {
-  try {
-    const response = await axios.put(`${API_URL}/${member.id}`, member);
-    return response.data;
-  } catch (error) {
-    console.error('Error updating member:', error);
-    throw error;
+  await delay(500);
+  const index = mockMembers.findIndex(m => m.id === member.id);
+  if (index !== -1) {
+    mockMembers[index] = member;
+    console.log('Updated member:', member);
+    return member;
   }
+  throw new Error('Member not found');
 };
 
 export const deleteMember = async (memberId: string): Promise<void> => {
-  try {
-    await axios.delete(`${API_URL}/${memberId}`);
-  } catch (error) {
-    console.error('Error deleting member:', error);
-    throw error;
-  }
+  await delay(500);
+  mockMembers = mockMembers.filter(m => m.id !== memberId);
+  console.log('Deleted member with id:', memberId);
 };