AI: 修复 MemberList.jsx 中的语法错误

src/components/MemberList.jsx

@@ -6,7 +6,38 @@ import MemberForm from './MemberForm';
 import MemberEditForm from './MemberEditForm';
 
 const MemberList = () => {
-  // ... 其他状态和函数保持不变
+  const [members, setMembers] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [isAddModalVisible, setIsAddModalVisible] = useState(false);
+  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
+  const [editingMember, setEditingMember] = useState(null);
+
+  useEffect(() => {
+    fetchMembers();
+  }, []);
+
+  const fetchMembers = async () => {
+    setLoading(true);
+    try {
+      const data = await deviceApi.getAllPersons();
+      console.log('Fetched members:', data); // 调试日志
+      setMembers(data);
+    } catch (error) {
+      console.error('获取会友列表失败', error);
+      message.error('获取会友列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAdd = () => {
+    setIsAddModalVisible(true);
+  };
+
+  const handleEdit = (record) => {
+    setEditingMember(record);
+    setIsEditModalVisible(true);
+  };
 
   const handleDelete = async (id) => {
     try {
@@ -34,10 +65,110 @@ const MemberList = () => {
     }
   };
 
-  // ... 其他代码保持不变
+  const handleMemberAdded = (newMember) => {
+    setMembers([...members, newMember]);
+    setIsAddModalVisible(false);
+  };
+
+  const handleMemberEdited = (editedMember) => {
+    setMembers(members.map(member => 
+      member.personId === editedMember.personId ? editedMember : member
+    ));
+    setIsEditModalVisible(false);
+  };
+
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'personId',
+      key: 'personId',
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '性别',
+      dataIndex: 'gender',
+      key: 'gender',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: '出生日期',
+      dataIndex: 'birthDate',
+      key: 'birthDate',
+    },
+    {
+      title: '婚姻状况',
+      dataIndex: 'maritalStatus',
+      key: 'maritalStatus',
+    },
+    {
+      title: '是否受洗',
+      dataIndex: 'isBaptized',
+      key: 'isBaptized',
+      render: (isBaptized) => isBaptized ? '是' : '否',
+    },
+    {
+      title: '受洗日期',
+      dataIndex: 'baptismDate',
+      key: 'baptismDate',
+    },
+    {
+      title: '联系方式',
+      dataIndex: 'contact',
+      key: 'contact',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button onClick={() => handleEdit(record)}>编辑</Button>
+          <Button onClick={() => handleDelete(record.personId)} danger>删除</Button>
+        </Space>
+      ),
+    },
+  ];
 
   return (
-    // ... JSX 保持不变
+    <div>
+      <h2>会友列表</h2>
+      <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
+        添加会友
+      </Button>
+      <ExcelImportExport members={members} onImport={fetchMembers} />
+      <Table
+        columns={columns}
+        dataSource={members}
+        rowKey="personId"
+        loading={loading}
+      />
+      <Modal
+        title="添加会友"
+        visible={isAddModalVisible}
+        onCancel={() => setIsAddModalVisible(false)}
+        footer={null}
+      >
+        <MemberForm onMemberAdded={handleMemberAdded} />
+      </Modal>
+      <Modal
+        title="编辑会友"
+        visible={isEditModalVisible}
+        onCancel={() => setIsEditModalVisible(false)}
+        footer={null}
+      >
+        <MemberEditForm 
+          member={editingMember} 
+          onMemberEdited={handleMemberEdited} 
+        />
+      </Modal>
+    </div>
   );
 };