ReactJS中如何实现点击删除按钮删除表格对应指定行

问题核心原因 #

• 渲染表格行时错误使用数组索引index作为key属性。React的虚拟DOM Diff逻辑依赖key识别节点，当你删除某一行后，后续所有行的索引都会往前挪一位，用索引当key的情况下React无法正确识别要删除的节点，就会出现删错行的表现。
• 小概率原因：删除按钮的点击事件绑定错误，没有正确传入当前行对应的索引值。

具体修复步骤 #

1. 替换行的key值
   不要用索引当key，用shop数组每一项的唯一标识（比如数据自带的id字段）作为key，示例代码如下：

// 原来的错误写法
{shop.map((item, index) => (
  <tr key={index}>
    {/* 其他单元格 */}
    <td><button onClick={() => singleDelete(index)}>删除</button></td>
  </tr>
))}

// 修改后的正确写法
{shop.map((item, index) => (
  <tr key={item.id}> {/* 这里用item的唯一id替换index */}
    {/* 其他单元格 */}
    <td><button onClick={() => singleDelete(index)}>删除</button></td>
  </tr>
))}

2. 优化删除逻辑（可选，更稳妥）
   如果你的shop数据没有自带唯一id，可以直接用数组过滤的方式替换splice操作，避免索引错乱问题，修改删除函数如下：

// 先给删除函数传当前行的item对象，而不是索引
function singleDelete(targetItem){
  const newShop = shop.filter(item => item !== targetItem);
  setShop(newShop);
  // 注意：count如果只是统计数据条数，完全不需要单独维护，直接用shop.length取值即可，避免两个状态不同步
  // 如果必须保留count状态，建议用函数式更新避免异步问题：setCount(prev => prev - 1)
}

对应绑定点击事件的地方改成：

<button onClick={() => singleDelete(item)}>删除</button>

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