React Native FlatList 如何仅隐藏已选中的单个条目避免重复选择

问题原因 #

你现在的问题根源是picked是全局共享的单个布尔状态，所有列表项的显示逻辑都绑定了这同一个状态，修改后自然会触发所有条目同时隐藏。

修复方案 #

方案1：调整状态存储结构，按ID判断是否隐藏 #

1. 把状态改为存储已选中的条目ID集合，用Set结构查询效率更高：

const [pickedIds, setPickedIds] = useState<Set<number>>(new Set())

2. 修改选中处理逻辑，点击时把对应ID加入集合：

const handleChoice = (id: number) => {
  // 保留你原有处理选中的业务逻辑
  setPickedIds(prev => {
    const newSet = new Set(prev)
    newSet.add(id)
    return newSet
  })
}

3. 调整列表项的显示判断，只判断当前条目的ID是否在选中集合中：

<TouchableOpacity
  style={[ styles.holder, { display: pickedIds.has(parseInt(card.item.id)) ? "none" : "flex" } ]}
  onPress={() => handleChoice(parseInt(card.item.id))}
>

更推荐的方案：直接过滤数据源 #

不需要通过样式隐藏节点，直接给FlatList传入过滤后的数据源，已选中的条目直接不参与渲染，性能更好，也避免隐藏节点带来的布局副作用：

<FlatList
  {/* 其他属性保持不变 */}
  data={allCards.filter(card => !pickedIds.has(parseInt(card.id)))}
  renderItem={(card: ListRenderItemInfo<CardsProps>) => (
    <TouchableOpacity
      style={styles.holder}
      onPress={() => handleChoice(parseInt(card.item.id))}
    >
      <Card
       {/* 卡片属性保持不变 */}
      />
    </TouchableOpacity>
  )}
/>

这种方案不需要额外控制样式，虚拟列表会自动适配过滤后的数据源，渲染效率更高，如果后续需要支持撤销选中，只要把对应ID从pickedIds中移除即可自动恢复显示。

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