Firebase Map数据展示异常：ListTile重复显示选中项

你的Firebase数据库里fifthQuestion是Map类型字段，包含Black和Brown两个布尔值选项，用户选完后对应选项的值会设为true。当前代码能识别出选中的选项，但会重复显示选中项，显示次数等于总选项数（哪怕是未选中的选项也会触发一次显示），需要调整代码只展示标记为true的选项。

核心修复思路 #

遍历fifthQuestion的键值对时，先判断对应值是否为true，再执行显示逻辑，直接跳过值为false的项，避免无效的显示触发。

示例代码修改（JavaScript） #

假设你原来的代码是这样的（会导致重复显示）：

// 原问题代码：遍历所有选项，不管选中与否都走一遍逻辑
const fifthQuestion = snapshot.data().fifthQuestion;
Object.keys(fifthQuestion).forEach(key => {
  if (fifthQuestion[key]) {
    console.log(`选中的选项：${key}`);
    // 这里的显示逻辑会在每个选项遍历都执行一次，造成重复
  }
});

修改后的代码：

// 修复后：仅当值为true时才执行显示
const fifthQuestion = snapshot.data().fifthQuestion;
Object.entries(fifthQuestion).forEach(([key, value]) => {
  if (value === true) {
    console.log(`选中的选项：${key}`);
    // 这里的显示逻辑只会在选中项时触发一次
  }
});

Flutter/Dart 版本示例 #

如果是用Flutter开发，也可以这么改：

// 遍历Map，只处理值为true的项
Map<String, bool> fifthQuestion = snapshot.data()['fifthQuestion'];
fifthQuestion.forEach((key, value) {
  if (value) {
    print('选中的选项：$key');
    // 这里写你的UI显示逻辑
  }
});

或者用更简洁的过滤写法：

// 先过滤出所有选中的选项，再遍历显示
var selectedOptions = fifthQuestion.entries
    .where((entry) => entry.value)
    .map((entry) => entry.key);

for (var option in selectedOptions) {
  print('选中的选项：$option');
}

这样调整后，只有被标记为true的选项才会触发显示逻辑，彻底解决重复显示的问题。

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