Material UI/React Table行删除异常：仅删最后一行的修复方案

你遇到的问题核心是React列表渲染缺少唯一key，导致React无法正确识别要删除的行，加上函数式更新优化状态处理即可解决：

1. 给表格行添加唯一Key #

在TestSteps组件的TableRow上添加key属性，使用每行的唯一id：

// 修改TestSteps组件里的TableRow部分
{items.map((customer, i) => {
  return (
      <TableRow key={customer.id}> {/* 添加唯一key */}
        {/* ... 其他代码保持不变 */}
      </TableRow>
    )
  })}

2. 优化状态更新逻辑（可选但推荐） #

在Page组件的handleRemove里使用函数式更新，避免闭包导致的状态不一致问题：

function handleRemove(id) {
  setTestSteps(prevTestSteps => prevTestSteps.filter((item) => item.id !== id));
}

原因说明 #

React列表渲染时，若未指定唯一key，会默认用元素索引作为key。当删除非最后一行时，React的diff算法会错误地复用DOM元素，导致看起来像是删除了最后一行。加上基于id的唯一key后，React能准确识别每个行元素，正确删除对应id的行。

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