ReactJS项目中为Ant Design表格添加删除功能求助

以下是针对已有编辑、添加功能的Ant Design表格新增删除功能的具体实现方案：

1. 在表格操作列新增删除按钮 #

找到表格的columns配置中对应操作列的部分，添加带二次确认的删除按钮（推荐用Ant Design的Popconfirm组件避免误删）：

import { Table, Button, Popconfirm, message } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';

// 你的表格列配置示例
const columns = [
  // 其他业务列配置...
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <div style={{ display: 'flex', gap: 8 }}>
        {/* 已有编辑按钮 */}
        <Button type="link" onClick={() => handleEdit(record)}>编辑</Button>
        {/* 新增删除按钮及确认弹窗 */}
        <Popconfirm
          title="确定要删除这条数据吗？"
          onConfirm={() => handleDelete(record.id)}
          okText="确定"
          cancelText="取消"
        >
          <Button type="link" danger icon={<DeleteOutlined />}>删除</Button>
        </Popconfirm>
      </div>
    ),
  },
];

2. 实现删除逻辑函数 #

根据项目实际场景选择对应的删除逻辑：

场景1：调用后端接口删除 #

如果需要请求后端接口完成数据删除，实现handleDelete函数：

const handleDelete = async (id) => {
  try {
    // 替换为项目实际的后端删除接口地址
    await fetch(`/api/keunggulan-kami/${id}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
        // 若需身份验证，在此添加token等认证头
        // 'Authorization': `Bearer ${yourAuthToken}`
      },
    });
    // 删除成功后更新表格数据（假设用本地state管理表格数据）
    setTableData(prev => prev.filter(item => item.id !== id));
    message.success('删除成功');
  } catch (err) {
    message.error('删除失败，请稍后重试');
    console.error('删除请求错误:', err);
  }
};

场景2：前端本地模拟删除 #

若仅需前端测试，直接过滤本地数据即可：

const handleDelete = (id) => {
  setTableData(prev => prev.filter(item => item.id !== id));
  message.success('删除成功');
};

3. 整合到现有组件 #

确保组件中已通过useState（或状态管理库）维护表格数据状态，删除操作后更新状态，Ant Design表格会自动重新渲染。

关键注意点 #

• 每条数据必须有唯一标识（如id），用于精准定位并删除目标行
• 后端接口调用时需处理异常，给用户清晰的反馈提示
• 若项目使用Redux、Zustand等全局状态管理工具，需对应修改全局状态而非本地state

内容的提问来源于stack exchange，提问作者Esther