React中数组状态变更后组件未更新/重新渲染问题

嘿，我太懂你遇到的这个坑了——删除元素后明明状态变了，但组件就是不更新，这可是React状态更新里的经典误区！

问题根源 #

先看你这段删除逻辑：

const onDelete = (position, e) => {
  let arr = subNames;
  arr.splice(position, 1);
  setSubNames(arr);
};

这里的核心问题是：let arr = subNames根本没创建新数组，只是把原状态数组的引用复制给了arr。接着你用splice直接修改了这个数组（splice是会篡改原数组的方法），最后调用setSubNames(arr)时，传入的还是原来的数组引用。

React判断状态是否需要更新是靠引用对比的——它发现前后状态的引用没变化，就会默认状态没更新，自然不会触发组件重新渲染。

修复方案 #

你需要用不可变更新的方式操作数组，也就是创建新数组来替代原数组，这里有两种简单可行的写法：

方法1：用filter（推荐，更简洁优雅）

filter会返回一个全新的数组，我们只需要过滤掉要删除的索引对应的元素就行：

const onDelete = (position) => {
  setSubNames(prevSubNames => prevSubNames.filter((_, index) => index !== position));
};

这里用函数式更新（prevSubNames）是更稳妥的做法，能确保我们基于最新的状态进行修改，避免状态滞后的问题。

方法2：先复制原数组再修改

通过扩展运算符（...）、slice()或者Array.from()创建原数组的浅拷贝，再修改这个副本：

const onDelete = (position) => {
  // 生成原数组的新副本
  const newArr = [...subNames];
  newArr.splice(position, 1);
  setSubNames(newArr);
};

现在newArr是一个全新的数组引用，React能精准检测到状态变化，自然就会重新渲染组件了。

额外小提醒 #

• 永远不要直接修改React的状态变量（比如subNames.push()、subNames.splice()这类操作都要杜绝），必须通过返回新值的方式更新状态。
• 你代码里map用key={key}（数组索引）虽然暂时能用，但如果数组元素的顺序会变化（比如删除操作），最好给每个元素加一个唯一ID作为key，避免潜在的渲染异常。比如添加元素时可以生成唯一标识：

setSubNames((prev) => prev.concat({ id: Date.now(), name: subName }));
// 后续map时用key={item.id}

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