Firebase get方法获取数据后调用map渲染无内容问题求助

问题原因 #

• store.collection('users').get() 是异步调用，返回Promise对象，你直接在渲染逻辑中调用cards()函数，拿到的是未完成的Promise，不是你预期的JSX元素数组，因此无法渲染对应内容。控制台能打印出数据是因为Promise resolve之后才执行的打印逻辑，但此时已经过了组件的初始渲染阶段。
• 你没有将异步获取到的图片数据存入组件状态，请求完成后不会触发组件重渲染，页面自然不会更新内容。

修复方案（以函数组件为例） #

1. 引入状态钩子存储图片数据，同时用副作用钩子触发异步请求：

import { useState, useEffect } from 'react'

// 组件内部
const [images, setImages] = useState([])

// 组件挂载时触发Firebase数据请求
useEffect(() => {
  store.collection('users').get().then(snapshot => {
    const imgList = snapshot.docs.map(doc => doc.data().image)
    setImages(imgList)
  })
}, [])

2. 直接遍历状态中的图片数组渲染UI：

return (
  <View>
   <View style={styles.viewport}>
    <CardStack style={styles.content}>
    {images.map((item, index) => (
      <Card key={index} style={[styles.card, styles.card1]}>
        <Text style={styles.label}>A</Text>
      </Card>
    ))}
    </CardStack>
   </View>
  </View>
)

注意事项 #

• 列表渲染的每个子元素需要绑定唯一key属性，如果你的image数据里有唯一标识，建议用该标识代替index作为key值，避免渲染异常。
• 可以额外新增一个加载状态变量，请求未完成时渲染加载提示，优化用户体验。

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