Ошибка "Невозможно прочитать свойство 'map' of undefined" при попытке прочитать и отобразить данные из FireStore через мое приложение реакции

Question

Я пытаюсь отобразить данные, прочитанные из моей коллекции в пожарном хранилище, но после получения данных из пожарного хранилища я попытался использовать функцию карты для сопоставления и отображения данных соответствующим образом, но это приводит к ошибке:

TypeError: Невозможно прочитать свойство 'map' из неопределенного

. Это может указывать на то, что мои события имеют неправильный формат для функции карты или события пусты.

Вот мой код для уточнения:

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

  React.useEffect(() => {
    db.collection("Events").get()
    .then(querySnapshot => {
      // const data = querySnapshot.docs.map(doc => doc.data());
      let events = [];
      querySnapshot.forEach(doc =>
        events.push({ ...doc.data() })
      )
      console.log(events);
      setEvents(events);
    });
  });

  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 contiues 

Я ожидаю, что код будет отображать данные для каждого события соответственно

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>
  )
}