AI: 调试会友列表显示问题

src/hooks/useMemberManagement.ts

@@ -1,69 +1,59 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { Member } from '../types/member';
-import { message } from 'antd';
-import { fetchMembers, addMember, updateMember, deleteMember } from '../services/memberService';
+import { fetchMembers as fetchMembersApi, addMember as addMemberApi, updateMember as updateMemberApi, deleteMember as deleteMemberApi } from '../services/memberService';
 
 export const useMemberManagement = () => {
   const [members, setMembers] = useState<Member[]>([]);
   const [loading, setLoading] = useState(false);
 
-  const loadMembers = useCallback(async () => {
+  const fetchMembers = useCallback(async () => {
     setLoading(true);
     try {
-      const fetchedMembers = await fetchMembers();
+      const fetchedMembers = await fetchMembersApi();
       setMembers(fetchedMembers);
     } catch (error) {
       console.error('Failed to load members:', error);
-      message.error('加载会友列表失败');
     } finally {
       setLoading(false);
     }
   }, []);
 
-  useEffect(() => {
-    loadMembers();
-  }, [loadMembers]);
-
-  const handleAddMember = async (member: Omit<Member, 'id'>) => {
+  const addMember = async (member: Omit<Member, 'id'>) => {
     try {
-      const newMember = await addMember(member);
-      setMembers([...members, newMember]);
-      message.success('会友添加成功');
+      await addMemberApi(member);
+      await fetchMembers(); // 重新获取会友列表
     } catch (error) {
       console.error('Failed to add member:', error);
-      message.error('添加会友失败');
+      throw error;
     }
   };
 
-  const handleEditMember = async (updatedMember: Member) => {
+  const editMember = async (updatedMember: Member) => {
     try {
-      await updateMember(updatedMember);
-      setMembers(members.map(member => 
-        member.id === updatedMember.id ? updatedMember : member
-      ));
-      message.success('会友信息更新成功');
+      await updateMemberApi(updatedMember);
+      await fetchMembers(); // 重新获取会友列表
     } catch (error) {
       console.error('Failed to update member:', error);
-      message.error('更新会友信息失败');
+      throw error;
     }
   };
 
-  const handleDeleteMember = async (memberId: string) => {
+  const deleteMember = async (memberId: string) => {
     try {
-      await deleteMember(memberId);
-      setMembers(members.filter(member => member.id !== memberId));
-      message.success('会友删除成功');
+      await deleteMemberApi(memberId);
+      await fetchMembers(); // 重新获取会友列表
     } catch (error) {
       console.error('Failed to delete member:', error);
-      message.error('删除会友失败');
+      throw error;
     }
   };
 
   return {
     members,
     loading,
-    addMember: handleAddMember,
-    editMember: handleEditMember,
-    deleteMember: handleDeleteMember,
+    fetchMembers,
+    addMember,
+    editMember,
+    deleteMember,
   };
 };

src/pages/MemberManagement.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Button, Spin, Input } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Button, Spin, Input, message } from 'antd';
 import MemberList from '../components/member/MemberList';
 import MemberModal from '../components/member/MemberModal';
 import { useMemberManagement } from '../hooks/useMemberManagement';
@@ -13,13 +13,22 @@ const MemberManagement: React.FC = () => {
     loading,
     addMember, 
     editMember, 
-    deleteMember 
+    deleteMember,
+    fetchMembers
   } = useMemberManagement();
 
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [editingMember, setEditingMember] = useState<Member | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
 
+  useEffect(() => {
+    fetchMembers();
+  }, [fetchMembers]);
+
+  useEffect(() => {
+    console.log('Members:', members);
+  }, [members]);
+
   const showModal = () => {
     setEditingMember(null);
     setIsModalVisible(true);
@@ -30,13 +39,19 @@ const MemberManagement: React.FC = () => {
     setIsModalVisible(true);
   };
 
-  const handleOk = (member: Member) => {
-    if (editingMember) {
-      editMember({ ...editingMember, ...member });
-    } else {
-      addMember(member);
+  const handleOk = async (member: Member) => {
+    try {
+      if (editingMember) {
+        await editMember({ ...editingMember, ...member });
+      } else {
+        await addMember(member);
+      }
+      setIsModalVisible(false);
+      message.success(editingMember ? '会友信息更新成功' : '会友添加成功');
+      fetchMembers(); // 重新获取会友列表
+    } catch (error) {
+      message.error('操作失败，请重试');
     }
-    setIsModalVisible(false);
   };
 
   const handleCancel = () => {
@@ -48,6 +63,16 @@ const MemberManagement: React.FC = () => {
     setSearchTerm(value);
   };
 
+  const handleDelete = async (memberId: string) => {
+    try {
+      await deleteMember(memberId);
+      message.success('会友删除成功');
+      fetchMembers(); // 重新获取会友列表
+    } catch (error) {
+      message.error('删除失败，请重试');
+    }
+  };
+
   const filteredMembers = members.filter(member => 
     member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
     member.phone.includes(searchTerm) ||
@@ -73,7 +98,7 @@ const MemberManagement: React.FC = () => {
         <MemberList 
           members={filteredMembers} 
           onEdit={handleEdit} 
-          onDelete={deleteMember} 
+          onDelete={handleDelete} 
         />
       )}
       <MemberModal 

src/services/memberService.ts

@@ -19,7 +19,7 @@ let mockMembers: Member[] = [
     groupLeader: '李四',
     isBaptized: true,
     baptismDate: '2015-05-20',
-    servicePosition: '敬拜团'
+    servicePositions: ['敬拜团成员', '小组长']
   },
   {
     id: '2',
@@ -34,19 +34,21 @@ let mockMembers: Member[] = [
     workplace: 'YY教育机构',
     groupLeader: '王五',
     isBaptized: false,
-    servicePosition: '主日学老师'
+    servicePositions: ['主日学老师']
   },
 ];
 
 export const fetchMembers = async (): Promise<Member[]> => {
   await delay(500); // 模拟网络延迟
-  return mockMembers;
+  console.log('Fetched members:', mockMembers);
+  return [...mockMembers];
 };
 
 export const addMember = async (member: Omit<Member, 'id'>): Promise<Member> => {
   await delay(500);
   const newMember = { ...member, id: Date.now().toString() };
   mockMembers.push(newMember);
+  console.log('Added member:', newMember);
   return newMember;
 };
 
@@ -55,6 +57,7 @@ export const updateMember = async (member: Member): Promise<Member> => {
   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');
@@ -63,4 +66,5 @@ export const updateMember = async (member: Member): Promise<Member> => {
 export const deleteMember = async (memberId: string): Promise<void> => {
   await delay(500);
   mockMembers = mockMembers.filter(m => m.id !== memberId);
+  console.log('Deleted member with id:', memberId);
 };