如何使用React Hooks通过索引删除数组元素并保持索引连续？

在React的useState中，不能直接用splice修改原数组——因为splice会直接改变原state，违反React状态不可变的原则，可能导致组件无法正确更新。要按索引删除元素并保证索引无间隙、自动排序，推荐以下两种方法：

方法一：使用filter过滤 #

通过filter创建一个排除目标索引的新数组，再更新state：

// 删除索引为1的元素
setMyArray(prevArray => prevArray.filter((_, index) => index !== 1));

filter会遍历原数组，只保留索引不等于目标值的元素，返回全新数组。用prevArray参数能确保拿到最新的state状态，避免状态更新不一致的问题。

方法二：使用slice拼接数组 #

利用slice截取目标索引前后的数组片段，再拼接成新数组：

// 删除索引为1的元素
setMyArray(prevArray => [
  ...prevArray.slice(0, 1),
  ...prevArray.slice(2)
]);

slice(0, 1)获取索引0到1（不包含1）的元素，slice(2)获取索引2到末尾的元素，通过扩展运算符...把两个片段拼接成新数组，自然跳过了目标索引的元素，索引会自动重新排序。

这两种方法都遵循了React状态不可变的要求，能保证组件正确触发重渲染，同时实现按索引删除元素、索引无间隙的效果。

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