执行表格删除操作后数据未即时更新、视图未重渲染如何解决？

React 状态更新采用浅比较逻辑判断是否需要触发重渲染：你当前代码中let data = tableData是直接复用了原状态数组的引用，后续调用splice是在原数组上直接修改内容，最终传入setTableData的仍然是同一个数组引用，React 判定状态未发生变化，因此不会触发表格组件重渲染。

方案1：使用filter直接生成新数组（更推荐） #

该方法无需修改原数组，代码更简洁无副作用：

const deleteRow = (row) => {
  // 过滤掉要删除的行，直接生成新数组
  const newData = tableData.filter(item => item.instrumentId !== row.instrumentId);
  setTableData(newData);
};

方案2：拷贝原数组后再修改 #

如果你习惯使用splice的写法，先拷贝原数组生成新引用再操作：

const deleteRow = (row) => {
  // 浅拷贝原数组生成新的引用
  const data = [...tableData];
  const indexOfDeleted = data.findIndex(item => item.instrumentId === row.instrumentId);
  if (indexOfDeleted > -1) {
    data.splice(indexOfDeleted, 1);
    setTableData(data);
  }
};

• 不要直接修改 React 状态变量本身，所有对状态的修改都要先生成新的引用再传递给状态setter函数
• 当前删除场景仅需对数组做浅拷贝即可满足需求，如果涉及数组元素的深层属性修改，可以根据需求选择深拷贝方案

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