Question

尝试通过我的 React 应用读取和显示来自 Firestore 的数据时出现错误“无法读取未定义的属性‘map’”

2019-09-19

448

reactjs google-cloud-firestore

我正在尝试显示从Firestore集合中读取的数据，但是从Firestore获取数据后，我尝试使用地图功能来映射＆amp;相应地显示数据，但最终出现错误：

763607679

，这可能表明我的事件对映射功能或事件是错误的格式或事件是空的。

这是我的代码以进行更多澄清：

047413482

我希望代码能够相应地显示每个事件的数据

Answer 1

由于从 Firestore 加载数据可能需要一段时间， events 的初始值将为空。从阅读此答案，似乎您可以将初始值传递给 React.useState() ，在这种情况下，该行应该是：

const [events, setEvents] = React.useState([]);

通过使用空数组 ( [] ) 进行初始化， map 函数将不执行任何操作，直到数据加载完成。

或者，您只能在数据加载后显示网格，并在此之前显示某种“正在加载...”消息。类似于：

if (items) {
  return (
    <Grid item sm={4}>
      { events.map(event => (
        <Card className={classes.card}>
          <CardHeader
            avatar={
              loading ? (
                <Skeleton variant="circle" width={40} height={40} />
              ) :
              <Avatar
                alt="Ted talk"
                src={event.eventImgUrl}
              />
            }
   .... // code continues
}
else {
  return (
    <div>Loading...</div>
  )
}

Answer 2

我认为有人也可以尝试添加 async await，刚才对我来说有效，但我确信还有很多其他类似上述解决方案

 React.useEffect( async () => {
   const snapshot = await db.collection("Events").get()
    if (snapshot.empty) {
    console.log("No Docs found")
    }
      setEvents(
         snapshot.docs.map((doc) => {
         return {
         ...doc.data(),
         documentID: doc.id,
         }
      })
   );
    });
  });