member-management-system-excel-2TiOKxFo/src/components/MemberList.jsx

import React, { useState, useEffect } from 'react';
import { Table, Button, message } from 'antd';
import { deviceApi } from '../api/deviceApi';
import ExcelImportExport from './ExcelImportExport';
import MemberForm from './MemberForm';

const MemberList = () => {
  const [members, setMembers] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchMembers();
  }, []);

  const fetchMembers = async () => {
    setLoading(true);
    try {
      const data = await deviceApi.getAllPersons();
      setMembers(data);
    } catch (error) {
      console.error('获取会友列表失败', error);
      message.error('获取会友列表失败');
    } finally {
      setLoading(false);
    }
  };

  const handleImport = (data) => {
    setMembers(data);
    message.success('数据导入成功');
  };

  const handleMemberAdded = (newMember) => {
    setMembers([...members, newMember]);
  };

  const columns = [
    // 列定义保持不变
    // ...
  ];

  return (
    <div>
      <h2>会友列表</h2>
      <ExcelImportExport members={members} onImport={handleImport} />
      <MemberForm onMemberAdded={handleMemberAdded} />
      <Table
        columns={columns}
        dataSource={members}
        rowKey="personId"
        loading={loading}
      />
    </div>
  );
};

export default MemberList;