React表格删除行功能异常：删除指定行却仅移除页面最后一行

这问题我之前做React表格的时候也踩过坑！核心问题出在你用index作为表格行的key上，这也是React新手很容易犯的错误。

为什么会出现这种情况？ #

React的虚拟DOM diff算法是靠key来识别每个元素的唯一性的。当你删除某一行后，剩下的行的index会重新排序（比如原来的第0、1行，删了第0行后，原来的第1行就变成第0行了）。这时候React会觉得：“哦，原来的最后一个index对应的元素不见了，那我就移除最后一行吧”，但实际上你的状态已经正确更新了，只是React的DOM更新逻辑被index误导了。

具体修复步骤 #

1. 给每行数据添加唯一标识

首先，给mList里的每个对象加上一个唯一的id字段（如果你的sym字段是全局唯一的，也可以直接用它，但更稳妥的是用独立的id）。比如初始化状态改成：

const[formValues,setFormValues] = useState({ 
  sCode:undefined, 
  sName:undefined, 
  mList:[
    { id: 1, sym:"abc", minLimit:undefined, maxLimit:undefined }, 
    { id: 2, sym:"xyz", minLimit:undefined, maxLimit:undefined }
  ] 
});

如果是动态新增行的话，可以用Date.now()或者uuid库生成唯一id，确保每行的标识不重复。

2. 用唯一标识代替index作为key

修改表格行的key属性，从依赖index改成依赖每行的唯一id：

<tr key={input.id}>

这样React就能准确识别每一行，删除时不会再混淆行的对应关系。

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

因为setFormValues是异步的，当你依赖之前的状态更新时，最好用函数式更新来确保拿到最新的状态：

const removeRow=(index)=>{
  setFormValues(prevState => {
    const newRows = [...prevState.mList];
    newRows.splice(index, 1);
    return {
      ...prevState,
      mList: newRows
    };
  });
}

这能避免因为状态异步更新导致的潜在问题，让状态变更更可靠。

做完这几步，你再测试删除功能，就会发现页面上的行和状态能同步正确更新了！

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