React Native从Firestore取数据可打印但无法在界面显示求助

核心问题 #

你的代码中allDocs.map循环没有返回JSX元素，导致尽管数据已获取并能在控制台打印，界面却无法渲染对应内容。

具体修改 #

在map回调中，当前使用大括号{}但未显式返回组件，只需将大括号改为小括号()（实现隐式返回），或者在大括号内添加return关键字即可：

修改后的代码片段 #

{
  allDocs.map(doc => (
    <Info key={doc.id}>
      {console.log(doc.name)}
      <Text>{doc.imageUrl}</Text>
      <Text>{doc.name}</Text>
      <Text>{doc.comments}</Text>
    </Info>
  ))
}

或者使用显式return写法：

{
  allDocs.map(doc => {
    return (
      <Info key={doc.id}>
        {console.log(doc.name)}
        <Text>{doc.imageUrl}</Text>
        <Text>{doc.name}</Text>
        <Text>{doc.comments}</Text>
      </Info>
    )
  })
}

额外确认项 #

• 从你提供的Firestore数据结构来看，doc.data().items确实是数组类型，数据获取逻辑无问题；
• 初始状态useState([])设置正确，能避免第一次渲染时因空值导致的报错。

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