React删除数组元素后UI未同步更新，求代码问题排查

嘿，这个问题我之前也踩过坑！核心原因是你直接修改了React的state数组，没有创建新的引用，导致React没检测到状态变化，所以UI迟迟不更新。

问题出在哪？ #

看你的deleteInput函数：

const deleteInput = (id, indexValue) => { 
  salesProduct.splice(indexValue, 1); // 直接修改原state数组！
  let data = salesProduct; // data还是原数组的引用
  console.log(data); 
  setSalesProduct(data); 
} 

React的状态更新是基于引用对比的——当你把同一个数组引用传给setSalesProduct，React会认为“状态没变化”，就不会触发组件重渲染，哪怕数组内容已经变了。控制台能看到正确数据是因为你确实修改了数组，但UI没收到更新通知。

修正方案：创建新数组更新state #

永远不要直接修改state，而是返回一个新的数组引用。这里有两种常用方式：

方式1：用filter（推荐，更简洁）

利用数组的filter方法创建一个排除要删除项的新数组：

const deleteInput = (id, indexValue) => {
  // 用index过滤，或者更可靠的用id过滤
  const newSalesProduct = salesProduct.filter((_, idx) => idx !== indexValue);
  // 或者用id过滤（更安全，避免数组顺序变化导致删错）：
  // const newSalesProduct = salesProduct.filter(item => item.id !== id);
  setSalesProduct(newSalesProduct);
}

方式2：复制原数组再修改

先创建原数组的副本（用扩展运算符[...arr]或者slice()），再修改副本，最后更新state：

const deleteInput = (id, indexValue) => {
  const newSalesProduct = [...salesProduct]; // 复制原数组得到新引用
  newSalesProduct.splice(indexValue, 1); // 修改副本
  setSalesProduct(newSalesProduct); // 传入新数组
}

为什么这样有效？ #

不管用哪种方式，你都是创建了一个新的数组对象，传给setSalesProduct后，React检测到state的引用变化，就会触发组件重渲染，UI就能正确显示删除后的数组了。

另外提个小建议：用id来过滤删除比用index更可靠，因为如果数组的顺序发生变化（比如排序、新增），index可能对应不上正确的项，而id是唯一标识，不会出错。

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