ReactJS中如何为表格每一行的Action列生成删除按钮

你现有代码的问题是直接遍历Object.values(item)渲染所有单元格，没有给操作列预留渲染位置，按以下步骤修改即可：

• 首先把表格数据存入组件state，只有state更新才会触发React重渲染，删除操作才会实时反映到视图上
• 不要隐式遍历对象属性渲染列，推荐显式声明每一列的渲染内容，避免对象属性顺序变动、额外属性导致表格列错乱；如果要保留原有遍历写法，在遍历完成后追加操作列单元格即可
• 写删除处理函数，接收当前行的唯一ID作为参数，通过过滤数组的方式生成排除了目标行的新数组，更新到state
• 在每行最后新增操作列的<td>，放入删除按钮，点击时把当前行的item.id传入删除函数

修改后的完整代码示例（函数组件版本）：

import { useState } from 'react';
// 此处替换成你项目中引入的Table组件，原生table/组件库Table都适用
export default function DataTable() {
  // 表格数据存入state，初始值替换为你实际的接口数据/初始数据
  const [table, setTable] = useState([
    // 示例数据结构：{ id: 1, description: '测试规则', protocol: 'TCP', lastSeen: '2024-05-20' }
  ]);

  // 行删除处理逻辑
  const handleDelete = (targetId) => {
    // 注意：必须返回新数组，不能直接修改原state，否则React不会触发重渲染
    setTable(prevData => prevData.filter(row => row.id !== targetId));
  };

  return (
    <Table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Description</th>
          <th>Protocol</th>
          <th>Last Seen</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {table.map((item) => (
          <tr key={item.id}>
            {/* 显式渲染各数据列，逻辑更可控 */}
            <td>{item.id}</td>
            <td>{item.description}</td>
            <td>{item.protocol}</td>
            <td>{item.lastSeen}</td>
            {/* 操作列单独渲染 */}
            <td>
              <button onClick={() => handleDelete(item.id)}>删除</button>
            </td>
          </tr>
        ))}
      </tbody>  
    </Table>
  );
}

如果你一定要保留原来遍历Object.values(item)的写法，可以把行渲染部分改成下面这种，但是不推荐，对象属性遍历的顺序不可控，后续维护容易出问题：

<tr key={item.id}>
  {Object.values(item).map((val, idx) => (
    <td key={idx}>{val}</td>
  ))}
  {/* 追加删除按钮列 */}
  <td>
    <button onClick={() => handleDelete(item.id)}>删除</button>
  </td>
</tr>

注意：如果删除操作需要调用后端接口，在handleDelete方法里先调接口，接口返回成功后再更新本地state即可，逻辑一致。

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