React中JavaScript splice方法删除数组元素UI更新异常求助

问题根源 #

1. 直接修改原状态数组 #

React状态遵循不可变原则，而Array.splice()是会直接修改原数组的方法。直接修改原状态数组后，React可能无法正确识别状态的变化，或者识别到的变化与预期不符，导致UI更新异常。

2. 列表渲染使用索引作为key #

如果渲染列表时把数组索引当作key传递给列表项，当数组元素被删除后，后续元素的索引会自动前移。React会基于key来复用组件，这就会导致它错误地复用原本属于其他元素的组件，最终表现为UI删除了最后一个元素，而非你点击的目标元素。

修正方案 #

1. 改用不可变方式更新数组 #

不要直接修改原状态数组，而是先复制出一个新数组再操作；或者使用filter方法直接生成新数组：

// 方法1：复制原数组后使用splice
const deleteAction = (index) => {
  // 用扩展运算符复制原数组，避免修改原状态
  const updatedArr = [...currentState];
  updatedArr.splice(index, 1);
  setState(updatedArr);
};

// 方法2：用filter更简洁（推荐）
const deleteAction = (index) => {
  setState(prevState => prevState.filter((_, idx) => idx !== index));
};

2. 为列表项设置唯一稳定的key #

停止使用索引作为key，改用每个列表项的唯一标识（比如元素自带的id字段）。如果没有现成的唯一标识，也可以在创建元素时手动生成：

// 错误示例：使用索引作为key
{state.map((item, index) => (
  <TodoItem 
    key={index} 
    content={item} 
    onDelete={() => deleteAction(index)} 
  />
))}

// 正确示例：使用唯一id作为key
{state.map((item) => (
  <TodoItem 
    key={item.id} 
    content={item} 
    onDelete={() => deleteAction(item.id)} 
  />
))}

// 对应的deleteAction也要改为根据id删除
const deleteAction = (targetId) => {
  setState(prevState => prevState.filter(item => item.id !== targetId));
};

这样修改后，React就能正确识别状态变化，并且准确匹配每个列表项，UI就能按照预期删除目标元素了。

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