FlatList单选单元格实现难题：官方多选示例无法实现可取消单选

我明白你现在的困境——想实现FlatList的单选功能，同时还要支持点击已选中的项来取消选中，但之前直接清空所有选中状态再设置当前项的写法，没办法实现“取消选中”这个操作。其实只需要调整onPressItem里的判断逻辑就能搞定。

修改后的实现代码 #

state = { selected: new Map() };

onPressItem = (id) => {
  this.setState((state) => {
    // 判断当前点击的项是否已经处于选中状态
    const isCurrentItemSelected = state.selected.get(id) === true;
    
    // 初始化新的选中状态Map
    const newSelected = new Map();
    
    if (!isCurrentItemSelected) {
      // 如果当前项未选中，就设置它为选中（自动实现单选，因为其他项都不在新Map里）
      newSelected.set(id, true);
    }
    // 如果当前项已选中，直接返回空Map，实现取消选中
    
    return { selected: newSelected };
  });
};

逻辑解释 #

• 首先判断当前点击的id是否已经在selected Map中被标记为true
• 如果未选中：创建一个全新的空Map，只把当前id设为true——这样自然就实现了单选，因为其他项的选中状态都被清空了
• 如果已选中：直接返回空Map，相当于取消当前项的选中状态

如果你想更直观地看到当前选中项的判断过程，也可以用另一种写法（逻辑完全一致，只是更清晰）：

onPressItem = (id) => {
  this.setState((state) => {
    // 找出当前已选中的项ID
    const activeSelectedId = Array.from(state.selected.entries())
      .find(([key, value]) => value)?.[0];
    
    let newSelected;
    if (activeSelectedId === id) {
      // 点击的是已选中项，清空选中状态
      newSelected = new Map();
    } else {
      // 点击的是未选中项，切换为选中它
      newSelected = new Map();
      newSelected.set(id, true);
    }
    
    return { selected: newSelected };
  });
};

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