如何利用map函数的索引删除状态数组中的指定元素？

这种情况我见得挺多的，大概率是你写删除逻辑的时候，过滤数组的条件搞反啦！

先说说问题根源 #

你本来想移除被点击的元素，结果写成了只保留被点击的元素，自然就把其他所有元素都删掉了。举个常见的错误例子：

// 错误的删除函数：只留下点击索引对应的元素，删掉其他
const handleDelete = (clickedIndex) => {
  setItems(items.filter(item => item.index === clickedIndex));
};

修正后的正确逻辑 #

把过滤条件反过来，只移除和点击索引匹配的元素，保留其他所有元素就行：

// 正确的删除函数：过滤掉点击索引对应的元素
const handleDelete = (clickedIndex) => {
  setItems(items.filter(item => item.index !== clickedIndex));
};

额外提醒：用数组原生索引的情况 #

如果你是用map的第二个参数（数组原生索引）来标记元素，那删除逻辑要对应处理数组的索引：

// 渲染时用数组原生索引
{items.map((item, index) => (
  <div key={index} onClick={() => handleDelete(index)}>
    {item}
  </div>
))}

// 对应的删除函数
const handleDelete = (clickedIndex) => {
  setItems(items.filter((_, index) => index !== clickedIndex));
};

更稳妥的方案：用唯一ID代替索引 #

如果数组里的元素有唯一标识（比如id），尽量用这个来做判断，比索引更可靠（避免数组排序/新增元素后索引混乱）：

// 假设每个元素有唯一id
{items.map((item) => (
  <div key={item.id} onClick={() => handleDelete(item.id)}>
    {item.content}
  </div>
))}

// 删除函数根据id过滤
const handleDelete = (targetId) => {
  setItems(items.filter(item => item.id !== targetId));
};

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