react-table数据删除异常求助：按钮绑定正常但无法删除数据

我帮你排查下代码里的问题，主要有几个核心点导致删除操作失效，咱们一步步来修复：

问题分析 #

1. slice 方法使用错误：slice() 是返回新数组的纯函数，不会修改原数组。你当前的代码里直接调用 sliceArr.slice(...) 但没把返回值赋值给变量，等于白执行。
2. 元素匹配逻辑错误：你给 handleDelete 传的是 row.id（一个字符串/数字），但数组里存的是带 id 属性的对象。用 indexOf(item) 找对象数组里的字符串/数字，永远匹配不到，自然不会执行删除。
3. 循环逻辑位置错误：你把删除操作放在了遍历 newState 的 for 循环内部，这会导致每次遍历对象key时都执行一遍删除，逻辑完全混乱。

修复后的代码 #

1. 修正 handleDelete 函数 #

handleDelete = (itemId) => {
  // 先把 props 里的 documentation 转换成带 id 属性的数组
  const newArr = Object.entries(this.props.documentation).map(([key, data]) => ({
    ...data,
    id: key
  }));
  
  // 过滤掉 id 等于传入的 itemId 的元素，得到新数组
  const filteredArr = newArr.filter(item => item.id !== itemId);
  
  console.log('New Array', filteredArr);
  this.setState({ data: filteredArr });
};

2. 按钮部分（保持不变，确认传参正确） #

Cell: row => (
  <div>
    <button onClick={() => this.handleDelete(row.id)}>Delete</button>
  </div>
)

代码解释 #

• 用 Object.entries 替代 for...in 循环，更简洁安全地把对象转换成数组，同时给每个元素加上 id 属性。
• 用 filter 方法替代 indexOf + slice，直接过滤掉要删除的元素，逻辑更清晰，也避免了数组操作的错误。
• 把删除逻辑移到数组转换完成之后，确保只执行一次删除操作。

如果你的 row.id 不是对应元素的 id 属性，而是react-table行对象的内置id，那可以改成传递 row.original.id（react-table的行对象里，original 字段对应原始数据项），根据你的实际数据结构调整即可。

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