AI: 修复添加会友信息失败问题

src/components/member/AddMemberModal.tsx

@@ -1,23 +1,31 @@
 import React from 'react';
-import { Modal, Form, Input } from 'antd';
+import { Modal, Form, Input, message } from 'antd';
 import { Member } from '../../types/member';
 
 interface AddMemberModalProps {
   visible: boolean;
   onOk: () => void;
   onCancel: () => void;
-  onAddMember: (member: Member) => void;
+  onAddMember: (member: Omit<Member, 'id'>) => Promise<void>;
 }
 
 const AddMemberModal: React.FC<AddMemberModalProps> = ({ visible, onOk, onCancel, onAddMember }) => {
   const [form] = Form.useForm();
 
-  const handleOk = () => {
-    form.validateFields().then(values => {
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      await onAddMember(values);
       form.resetFields();
-      onAddMember(values as Member);
+      message.success('会友添加成功');
       onOk();
-    });
+    } catch (error) {
+      if (error instanceof Error) {
+        message.error(`添加会友失败: ${error.message}`);
+      } else {
+        message.error('添加会友失败');
+      }
+    }
   };
 
   return (

src/hooks/useMemberManagement.ts

@@ -1,11 +1,28 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Member } from '../types/member';
 import { message } from 'antd';
-import { addMember, updateMember, deleteMember } from '../services/memberService';
+import { fetchMembers, addMember, updateMember, deleteMember } from '../services/memberService';
 
 export const useMemberManagement = () => {
   const [members, setMembers] = useState<Member[]>([]);
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    loadMembers();
+  }, []);
+
+  const loadMembers = async () => {
+    setLoading(true);
+    try {
+      const fetchedMembers = await fetchMembers();
+      setMembers(fetchedMembers);
+    } catch (error) {
+      message.error('加载会友列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
 
   const showModal = () => {
     setIsModalVisible(true);
@@ -19,13 +36,12 @@ export const useMemberManagement = () => {
     setIsModalVisible(false);
   };
 
-  const handleAddMember = async (member: Member) => {
+  const handleAddMember = async (member: Omit<Member, 'id'>) => {
     try {
       const newMember = await addMember(member);
       setMembers([...members, newMember]);
-      message.success('会友添加成功');
     } catch (error) {
-      message.error('添加会友失败');
+      throw error;
     }
   };
 
@@ -54,6 +70,7 @@ export const useMemberManagement = () => {
   return {
     members,
     isModalVisible,
+    loading,
     showModal,
     handleOk,
     handleCancel,

src/pages/MemberManagement.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Spin } from 'antd';
 import MemberList from '../components/member/MemberList';
 import AddMemberModal from '../components/member/AddMemberModal';
 import { useMemberManagement } from '../hooks/useMemberManagement';
@@ -8,6 +8,7 @@ const MemberManagement: React.FC = () => {
   const { 
     members, 
     isModalVisible, 
+    loading,
     showModal, 
     handleOk, 
     handleCancel, 
@@ -22,11 +23,15 @@ const MemberManagement: React.FC = () => {
       <Button type="primary" onClick={showModal} style={{ marginBottom: 16 }}>
         添加会友
       </Button>
-      <MemberList 
-        members={members} 
-        onEdit={editMember} 
-        onDelete={deleteMember} 
-      />
+      {loading ? (
+        <Spin size="large" />
+      ) : (
+        <MemberList 
+          members={members} 
+          onEdit={editMember} 
+          onDelete={deleteMember} 
+        />
+      )}
       <AddMemberModal 
         visible={isModalVisible} 
         onOk={handleOk} 

src/services/memberService.ts

@@ -4,20 +4,40 @@ import { Member } from '../types/member';
 const API_URL = '/api/members'; // 假设这是您的API端点
 
 export const fetchMembers = async (): Promise<Member[]> => {
-  const response = await axios.get(API_URL);
-  return response.data;
+  try {
+    const response = await axios.get(API_URL);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching members:', error);
+    throw error;
+  }
 };
 
-export const addMember = async (member: Member): Promise<Member> => {
-  const response = await axios.post(API_URL, member);
-  return response.data;
+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;
+  }
 };
 
 export const updateMember = async (member: Member): Promise<Member> => {
-  const response = await axios.put(`${API_URL}/${member.id}`, member);
-  return response.data;
+  try {
+    const response = await axios.put(`${API_URL}/${member.id}`, member);
+    return response.data;
+  } catch (error) {
+    console.error('Error updating member:', error);
+    throw error;
+  }
 };
 
 export const deleteMember = async (memberId: string): Promise<void> => {
-  await axios.delete(`${API_URL}/${memberId}`);
+  try {
+    await axios.delete(`${API_URL}/${memberId}`);
+  } catch (error) {
+    console.error('Error deleting member:', error);
+    throw error;
+  }
 };