React Native问题：移除数组单个重复元素而非全部的解决方案

问题根源 #

你当前的实现用字符串值（比如"to"）来判断是否隐藏元素，只要newItems数组里存在该字符串，所有相同字符串的元素都会被隐藏。同时deleteWord用filter会删除所有匹配的字符串，这就是导致全部隐藏的原因。

解决方案 #

方案一：利用数组索引跟踪独立实例（无需修改原数据结构） #

适合原数据是纯字符串数组的场景，通过每个元素的索引作为唯一标识来区分相同字符串的不同实例：

1. 修改点击事件，传递元素索引而非字符串：

{enItems.enWordR?.map((enWordR, i) => (
  <TouchableOpacity
    key={i}
    onPress={() => handleSelected(i)} // 传递当前元素的索引
    style={[
      newItems.includes(i) ? styles.hideItem : styles.showItem, // 判断索引是否在隐藏列表中
    ]}
  >
    <Button
      title={enWordR}
      btnStyle={[styles.itemButton]}
      btnWrapperStyle={[styles.itemBtnWrapper]}
      labelStyle={styles.itemBtnLabel}
    />
  </TouchableOpacity>
))}

2. 更新handleSelected逻辑，直接切换元素的隐藏状态（可移除原useEffect）：

const handleSelected = (index) => {
  setNewItems((prevItems) => {
    // 如果索引已在隐藏列表中，移除它（取消隐藏）；否则添加它（隐藏）
    if (prevItems.includes(index)) {
      return prevItems.filter(item => item !== index);
    } else {
      return [...prevItems, index];
    }
  });
};

// 移除原useEffect，因为状态更新直接在handleSelected中完成

3. 如果仍需要deleteWord函数来移除单个隐藏实例：

const deleteWord = (targetIndex) => {
  setNewItems((prevItems) => {
    const index = prevItems.findIndex(item => item === targetIndex);
    if (index !== -1) {
      // 仅移除找到的第一个匹配索引
      return [...prevItems.slice(0, index), ...prevItems.slice(index + 1)];
    }
    return prevItems;
  });
};

方案二：给元素添加唯一ID（更可靠的长期方案） #

如果可以修改原数据结构，给每个单词实例添加唯一ID，能避免数组顺序变化导致的索引失效问题：

1. 调整原数据结构为对象数组：

// 示例：给每个单词添加唯一ID
enItems.enWordR = [
  { id: '1', word: "I'm" },
  { id: '2', word: "going" },
  { id: '3', word: "to" },
  { id: '4', word: "go" },
  { id: '5', word: "to" },
  { id: '6', word: "London" },
];

2. 渲染和点击逻辑修改为基于ID：

{enItems.enWordR?.map((item) => (
  <TouchableOpacity
    key={item.id} // 用唯一ID作为key
    onPress={() => handleSelected(item.id)}
    style={[
      newItems.includes(item.id) ? styles.hideItem : styles.showItem,
    ]}
  >
    <Button
      title={item.word}
      btnStyle={[styles.itemButton]}
      btnWrapperStyle={[styles.itemBtnWrapper]}
      labelStyle={styles.itemBtnLabel}
    />
  </TouchableOpacity>
))}

3. 状态更新和删除逻辑：

const handleSelected = (itemId) => {
  setNewItems((prevItems) => {
    if (prevItems.includes(itemId)) {
      return prevItems.filter(id => id !== itemId);
    } else {
      return [...prevItems, itemId];
    }
  });
};

const deleteWord = (itemId) => {
  setNewItems((prevItems) => {
    const index = prevItems.findIndex(id => id === itemId);
    if (index !== -1) {
      return [...prevItems.slice(0, index), ...prevItems.slice(index + 1)];
    }
    return prevItems;
  });
};

这样就能实现点击哪个元素就隐藏/显示哪个，不会影响其他相同字符串的元素，同时deleteWord也只会移除指定的单个实例。

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