如何移除数组中单个匹配项？解决重复元素批量隐藏问题

你的问题核心是仅通过值来判断元素是否需要隐藏——因为mainArray里存在重复的"a"，只要newArray中加入了一个"a"，所有值为"a"的元素都会被匹配到，导致全部隐藏。解决关键是给每个元素添加唯一标识，让程序能区分开不同的重复元素。

具体修复步骤： #

1. 重构数组结构 #

把原字符串数组改成带唯一ID的对象数组，确保每个元素都有专属标识：

const mainArray = [
  { id: 1, value: "a" },
  { id: 2, value: "a" },
  { id: 3, value: "b" },
  { id: 4, value: "c" },
  { id: 5, value: "d" }
];

2. 修改点击事件逻辑 #

点击元素时，将对应元素的id（或整个对象）加入newArray，而非只存值：

const handleItemClick = (item) => {
  // 可选：避免重复添加同一元素
  if (!newArray.some(ele => ele.id === item.id)) {
    setNewArray([...newArray, item]);
  }
};

3. 调整样式判断逻辑 #

不再用值匹配，改用唯一id判断当前元素是否已被加入newArray：

style={newArray.find(item => item.id === mainArray[i].id) ? styles.hideItem : styles.showItem}

修复原理 #

每个元素拥有唯一id后，即便值相同，程序也能精准定位被点击的那一个，只会隐藏选中的元素，不会影响其他同值元素。

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