如何展示Firestore获取的用户对象中值为true的items并解决map报错问题

问题原因 #

map是JavaScript数组专属的遍历方法，你拿到的items是键值对格式的普通对象，本身没有map方法，所以直接调用会报错。你后续加了可选链?.map?.相当于做了熔断处理：判断到items没有map方法就终止执行，所以不会报错但也没有任何内容输出。

正确实现 #

你需要先把items对象转为数组，筛选出值为true的键后再遍历渲染，参考代码如下：

<ul>
  {Object.entries(user["1"]?.items ?? {})
    // 筛选出值为true的配置项
    .filter(([itemKey, isEnable]) => isEnable)
    // 遍历输出键名
    .map(([itemKey]) => <li key={itemKey}>{itemKey}</li>)
  }
</ul>

代码说明 #

• Object.entries() 会将对象转换为[键名, 键值]格式的二维数组，搭配空对象兜底?? {}可以避免items不存在时抛出异常
• filter 环节只保留值为true的项，符合你的需求
• 遍历渲染时直接取键名输出即可，记得给li元素加唯一key属性避免React的列表渲染警告

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