ReactJS删除表格Title行不生效，残留该行且TotalCount计算错误

排查思路 #

1. 优先校验后端接口逻辑（概率最高） #

• 调用删除接口成功后，直接在浏览器控制台/接口调试工具调用mainStructure对应的查询接口，查看返回结果：
  • 如果返回的tablestructure.data数组仍包含已删除的Title记录，说明后端删除逻辑只清除了Title关联的sub-title子记录，没有删除Title主记录，才会出现主记录留存、子标题为空的现象。
  • 如果返回的tablestructure.totalCount数值异常，说明后端统计计数时未过滤已删除的Title记录，直接累加了所有历史记录的计数。

2. 检查Redux状态更新逻辑 #

• 若接口返回的数据正常（删除后data长度为2、totalCount数值正确），检查mainStructure对应的reducer处理逻辑：是否存在新旧数据合并的写法，而非用接口返回的新数据全量覆盖tablestructure字段，导致旧的已删除记录残留在state中。

3. 修复前端已知代码缺陷 #

• Key值错误：titlesubtitletable.js中循环渲染行时使用数组index作为key，且内层遍历children时复用外层index作为key，会导致React Diff算法识别错误，渲染已删除的旧节点。建议替换为每条记录唯一的_id作为key。
• 列数不匹配：columns配置了4个列，但渲染TableRow时输出了5个TableCell（多了sub-title的删除按钮列），会导致表格结构错乱。
• 取值笔误：mainPage.js的getData方法中，title筛选条件取值写为this.filter.title，应为this.state.filter.title，若后续用到筛选功能会失效。

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