React+Ant Design表格点击按钮增删列表项技术求助

阿华AIGC实验室

2026-5-28

解决React + Ant Design表格增删行的问题

嗨，我看你现在的代码里add和remove函数只是打印日志，还没真正和表格数据联动起来。问题核心在于你需要把表格数据放到React的**状态（state）**里，这样修改状态后组件才会重新渲染，更新表格内容。我给你整理了完整的可行方案：

关键步骤说明

用useState钩子管理表格数据状态，替代原来的静态数组data
新增行时，生成唯一的key（避免重复），并通过不可变的方式更新状态
删除行时，通过每行的key过滤掉对应数据，同样以不可变方式更新状态
给表格新增操作列，方便单独删除某一行（比全局删除更实用）

完整代码示例

import { useState } from 'react';
import { Table, Button, Space } from 'antd';

function TableDemo() {
  // 把数据放到state里，初始值用你原来的data
  const [tableData, setTableData] = useState([
    { key: "1", num: 1, name: "John Brown", age: 32, address: "New York No. 1 Lake Park" },
    { key: "2", num: 2, name: "Jim Green", age: 42, address: "London No. 1 Lake Park" },
    { key: "3", num: 3, name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park" }
  ]);

  // 新增行函数：生成唯一key，创建新数据项，更新state
  const addRow = () => {
    // 生成唯一key，这里用当前时间戳，也可以用uuid等方式
    const newKey = Date.now().toString();
    // 新数据的num取当前最大num+1
    const maxNum = tableData.length > 0 ? Math.max(...tableData.map(item => item.num)) : 0;
    const newRow = {
      key: newKey,
      num: maxNum + 1,
      name: `New User ${maxNum + 1}`,
      age: 20,
      address: 'New Address'
    };
    // 不可变更新：用扩展运算符创建新数组，不要直接修改原数组
    setTableData([...tableData, newRow]);
  };

  // 删除行函数：根据传入的key过滤数据
  const removeRow = (key) => {
    setTableData(tableData.filter(item => item.key !== key));
  };

  // 给columns新增操作列
  const columns = [
    { title: "Num", dataIndex: "num" },
    { title: "Name", dataIndex: "name" },
    { title: "Age", dataIndex: "age" },
    { title: "Address", dataIndex: "address" },
    {
      title: "操作",
      render: (_, record) => (
        <Space>
          <Button type="danger" size="small" onClick={() => removeRow(record.key)}>删除</Button>
        </Space>
      )
    }
  ];

  return (
    <div>
      <Table pagination={false} columns={columns} dataSource={tableData} />
      <Button type="primary" onClick={addRow} style={{ marginTop: 16 }}>新增行</Button>
    </div>
  );
}

export default TableDemo;

核心要点解释

状态管理：React中只有状态变化才会触发组件重渲染，所以必须把表格数据放到useState里
不可变更新：永远不要直接修改原数组（比如push、splice），而是通过扩展运算符...或者filter、map等方法返回新数组，这样React才能检测到状态变化
唯一key：Ant Design的表格依赖key属性来识别每一行，所以新增行时一定要生成唯一的key，避免渲染异常
操作列：通过columns的render属性可以自定义列内容，这里添加了每行的删除按钮，点击时传递当前行的key来精准删除