React 分页数组删除元素未触发视图更新，仅切换页面时生效

问题原因 #

• 核心原因是state更新时未变更数组引用：你在handleRemoveClick方法中使用splice原地修改了原records数组，而splice是修改原数组的方法，修改后的数组引用地址没有发生变化。React的state更新采用浅比较逻辑，当你把引用未变的数组传给setRecords时，React会判定state未发生变化，不会触发组件重渲染，因此表格不会同步更新。只有切换分页时page/rowsPerPage等其他状态变更触发重渲染，才会加载最新的records数据。
• 次要问题是列表使用index作为key：如果删除的不是当前页最后一条数据，React会复用错误的DOM节点，也可能导致渲染异常。
• 额外检查项：确认自定义hookuseTable内部将入参records加入了对应计算逻辑的依赖项，避免内部缓存的旧数据未随入参更新。

修复方案 #

1. 修正state更新逻辑，永远使用新数组更新state，不要原地修改原数组，推荐用filter实现：

function handleRemoveClick(itemList, item) {
  // filter会返回全新数组，不修改原数组
  const newRecords = itemList.filter(record => record !== item);
  setRecords(newRecords);
}

如果要保留splice写法，需先浅拷贝原数组再修改：

function handleRemoveClick(itemList, item) {
  const index = itemList.indexOf(item);
  // 先浅拷贝得到新数组
  const newRecords = [...itemList];
  newRecords.splice(index, 1);
  setRecords(newRecords);
}

2. 将列表项的key替换为记录唯一标识，避免index作为key带来的复用问题：

recordsAfterPagingAndSorting().map((item) => (
  <ConditionalTableRow key={item.id} item={item} itemList={records} />
))

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