React.js中点击删除表格指定行却误删下一行该如何解决？

核心问题1：删除函数未接收正确参数 #

你当前直接给onClick绑定singleDelete，此时函数接收到的d实际上是点击事件对象，不是你预期的行id或者行索引，自然无法匹配到正确的待删除行。

核心问题2：key属性取值错误 #

你给<tr>设置的key是${s+i}，和数组索引强相关。当数组元素删除后，索引会自动重排，key就失去了唯一标识的作用，React在重渲染时会认错节点，导致渲染内容和实际数据不匹配，看起来就像删错了行。

核心问题3：多数组索引不同步（潜在问题） #

你代码中profil、acc都是按索引取值，和shop数组是一一对应的关系。如果只删除shop的元素，另外两个数组不做同步删除，也会出现行内容错配的情况。

完整修复步骤 #

1. 修正点击事件绑定，传入正确的行索引/行id
2. 替换为稳定的唯一key（建议给shop的每个元素新增唯一id属性作为key）
3. 修正删除逻辑，使用函数式更新避免闭包问题，同步更新关联数组
4. 修改按钮type为button，避免触发表单提交

修复后代码示例 #

// 建议给shop的每个元素新增唯一id，例如新增时赋值 Date.now() + Math.random()
const [shop, setShop] = useState([]);
// 如果profil和acc是和shop关联的状态，也需要同步维护
const [profil, setProfil] = useState([]);
const [acc, setAcc] = useState([]);

const singleDelete = (index) => {
  // 函数式更新拿最新的状态，避免闭包问题
  setShop(prevShop => prevShop.filter((_, i) => i !== index));
  // 同步删除另外两个数组对应索引的元素
  setProfil(prevProfil => prevProfil.filter((_, i) => i !== index));
  setAcc(prevAcc => prevAcc.filter((_, i) => i !== index));
}

return (
  <div className="content">
    <Table>
      <tbody id="tbid">
        {shop.map((s,i) => (
          // 优先用s.id当key，没有的话再考虑其他唯一标识，不要单独用索引当key
          <tr key={s.id ?? `${s}-${i}`} id={i} value={`${i}Row`}>
            <td>{i}</td>
            <td>{profil[i]}</td>
            <td>{s}</td>
            <td></td>
            <td>{acc[i]}</td>
            <td>
              <Button 
                className="btn-round btn-icon" 
                color="danger" 
                size="sm" 
                type="button" 
                // 绑定点击事件，传入当前行索引
                onClick={() => singleDelete(i)}
              >
                <i className="icon-simple-delete"/>
              </Button>
            </td>
          </tr>
        ))}
      </tbody>    
    </Table>
  <div>
)

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