ant-design table添加删除按钮

基于Ant Design实战教程，做的一个删除新增功能的小页面
Ant Design实战教程地址https://www.yuque.com/ant-design/course

附上源码地址https://gitee.com/li_guoqing139/ant_design

1、按照教程搭建项目，将表格做好后，效果

此时，新增按钮可以正常工作，如图

2、在表格中新增一列，添加删除按钮，在src/page/list/index.js中columns中添加如下代码

{
		title: 'action',
		render:(text, record)=> {
			return (<button onClick={()=>this.handleDelete(record.id)} > 删除 </button>);
		},
	},

如下图

并且定义handleDelte，代码如下

handleDelete = (id) => {
		console.log(id)
		const {
			dispatch,
		} = this.props;
		dispatch({
			type: 'cards/deleteOne',
			payload: id,
		})
		this.props.dispatch({
			type: 'cards/queryList',
		});
	}

如图

3、修改mock/cards.js，代码如下
此处修改的原因是：当所有数据删除后，data为空，再次新增时，读取不到data.id，就会发生错误。

'post /api/cards/add': function (req, res, next) {
    data = [...data, {
      ...req.body,
      id: data.length==0?1:data[data.length - 1].id + 1,
    }];
    
    res.json({
      success: true,
    });
  },

如图

4、保存修改，观察页面，如图

点击删除，可以正常删除