React中过滤数组后，如何保持数组项的索引恒定？

你的问题核心在于依赖technologies数组的动态索引来删除元素——这个索引会随着数组元素的增减实时变化，但点击事件传递的是元素被添加时的旧索引，导致后续删除时索引不匹配，无法正确移除目标项。

不需要把数组转成对象分配永久索引，直接基于技术名称本身处理就能解决问题，代码更简洁：

1. 修改toggleTechnology函数 #

去掉index参数，直接通过技术名称判断和过滤，完全脱离动态索引的依赖：

const toggleTechnology = (item) => {
  if (technologies.includes(item)) {
    // 过滤掉当前点击的技术项
    setTechnologies(technologies.filter(currentItem => currentItem !== item))
  } else {
    setTechnologies(tech => [...tech, item])
  }
}

2. 调整渲染时的点击事件 #

调用toggleTechnology时只传递技术名称，不再传索引：

const frontEndSklls = ['HTML', 'CSS', 'Javascript', 'React', 'Unit tests', 'Vue.js']

{frontEndSklls.map((item, index) => {
  return (
    <span 
      className={technologies.includes(item) ? "toggle-option active" : "toggle-option"} 
      onClick={() => toggleTechnology(item)} 
      key={index}
    >
      {item}
    </span>
  )
})}

为什么这个方案可行？ #

因为你的技术选项名称都是唯一的，直接用名称判断元素是否存在、过滤删除，完全不受数组索引变化的影响，逻辑更直观可靠。如果后续出现名称重复的场景，再给每个选项加唯一ID（比如{id: 'html', name: 'HTML'}）即可，当前场景下用名称完全足够。

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