React DataGrid删除功能异常求助：选中行无法删除

我来帮你梳理下这个删除功能的问题，看了你的代码，主要有几个关键错误导致选中行删不掉：

• 错误的存在性判断逻辑：你用arrayPerson.indexOf(id) > -1来判断行是否存在，但arrayPerson是对象数组，每个元素是包含id的对象，而indexOf只会查找数组中与id完全相等的元素（也就是直接找数字/字符串类型的id值），这显然匹配不到对象元素，所以这个条件永远不成立，后面的删除代码根本没机会执行。

• 直接修改Props的错误操作：const arrayPerson = this.props.rowData;只是把props的数组引用赋值给了变量，后续用splice修改它时，相当于直接修改了props的值。React中props是只读的，直接修改会导致状态混乱，也不符合React的数据流规范。

• 冗余的索引判断：你已经通过_.findIndex拿到了目标行的索引，只要判断这个索引不等于-1（表示找到对应行）就可以执行删除，不需要再用indexOf做额外判断。

修正后的代码 #

// 删除逻辑修正
deleteHandler = (id) => {
  // 先创建props数组的浅拷贝，避免直接修改props
  const arrayPerson = [...this.props.rowData];
  // 用Lodash找到对应id的行索引
  const index = _.findIndex(arrayPerson, { id });
  // 确认找到目标行后执行删除
  if (index !== -1) {
    arrayPerson.splice(index, 1);
    this.setState({ rows: arrayPerson });
  }
}

// 点击事件可以加个日志排查ID是否正确传入
<button onClick={() => {
  console.log('要删除的ID:', params.value);
  this.deleteHandler(params.value);
}}>X</button>

额外排查点 #

如果修正后还是删不掉，可以打开浏览器控制台看看console.log输出的ID是不是你预期的数值，确认params.value确实传递了正确的行ID。

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