为何无法使用useState Hook删除数组元素？请求排查代码

问题根源 #

你的删除逻辑失效核心原因是参数传递错误：

• 点击删除按钮时，deleting函数接收的参数是点击事件对象，而非你预期的索引值
• 此时e - 1会计算出NaN，index !== NaN永远为true，导致filter无法过滤任何元素，数组无变化

修复步骤 #

1. 修正参数传递：渲染Ank组件时，通过箭头函数直接传递目标元素的原索引，避免事件对象干扰
2. 简化删除逻辑：直接使用原索引进行过滤，去掉多余的+1/-1计算

修改后的关键代码如下：

1. 调整Ank组件的调用

{array.map((e, index) => {
  return (
    <Ank key={index} onSelect={() => deleting(index)} name={e} />
  );
})}

2. 重构deleting函数

const deleting = (targetIndex) => {
  setArray(prevArray => prevArray.filter((_, index) => index !== targetIndex));
};

额外优化建议 #

• 避免用数组索引作为key：元素删除后索引会重新排列，可能导致React渲染异常，建议给每个笔记添加唯一ID（比如用Date.now()生成）
• 当前的useEffect已能正确同步数组到localStorage，无需修改

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