React.js 费用追踪表格点击移除按钮后行未被删除问题

你遇到的“点击删除按钮后对应行不消失”的问题，和React渲染机制、state异步更新链路无关，本质是两处代码逻辑错误：

• 第一处核心错误：点击事件参数命名冲突，传入的删除定位值完全无效
  在表格行的map循环逻辑里，你本来已经拿到了每行的数字索引i，但写删除按钮的点击回调时，把回调的形参重新命名为i——这个形参实际接收的是React的合成点击事件对象，根本不是外层循环生成的行索引。
  把事件对象传给handleDelete后，方法内执行splice(i, 1)时，JS引擎会把事件对象转成非数字值NaN。按照splice的执行规则，NaN会被当作数组位置0，最终的操作结果就是不管点哪行的删除按钮，都只会尝试删除数组的第一个元素，完全匹配不到你要删除的目标行，自然会出现“点击了对应行但内容没被移除”的现象。
  对应的错误代码片段：

  <td><button onClick={i => this.props.handleDelete(i)} >Remove</button></td>
  

  这里回调里的i是点击事件本身，不是外层map拿到的行号。
• 第二处潜在隐患：依赖数组索引做删除定位的逻辑稳定性不足
  哪怕把参数传对了，用数组索引做删除定位也很容易出错：后续如果给列表加排序、筛选、翻页功能，行索引和实际条目的对应关系会随时错位，大概率出现删错行的问题。

具体修复步骤 #

1. 解决参数命名遮蔽问题
   把点击回调的形参改成不冲突的命名（比如用通用的e指代点击事件），直接把外层map拿到的行索引i传给删除方法：

<td><button onClick={(e) => this.props.handleDelete(i)} >Remove</button></td>

2. 优化删除逻辑，彻底规避索引错位问题
   改成基于每条数据的唯一id做匹配删除，不管列表顺序怎么变化，都能准确匹配到要删除的行：

• 修改App组件内的handleDelete方法，用filter替代splice操作，不需要手动拷贝数组，逻辑更直观：

  handleDelete(targetId) {
    const updatedExpenses = this.state.expenses.filter(item => item.id !== targetId)
    this.setState({
      expenses: updatedExpenses
    })
  }
  

• 修改按钮的传值逻辑，直接把当前行的唯一id传入删除方法，不需要传递数组索引：

  <td><button onClick={() => this.props.handleDelete(expense.id)} >Remove</button></td>
  

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