.map() не определяется как функция

#javascript #reactjs #jsx

Вопрос:

Я пытаюсь использовать «.map()» для отображения документов, которые я получаю с firebase. Однако в нем говорится, что .map() не является функцией. Код приведен ниже. В основном я пытаюсь получить свои данные firebase, а затем отобразить каждый документ как элемент.

  <div{posts.map((doc) => <p>{doc.data().text}</p>)}</div>

Как я очистил переменную useState posts:

   const [posts, setPosts] = useState([]);

Как я установил переменную useState posts:

 useEffect(() => {
  db.collection('posts').onSnapshot((querySnapshot) => {
    setPosts(querySnapshot);

  });
})

Кроме того, я попытался использовать «.forEach». Я могу «console.log» для каждого документа использовать «.forEach», но «.forEach» не позволяет возвращать элементы.

1. Кроме того, переменная usestate «сообщения» задается следующим образом: useEffect (() = > { ссылка на onSnapshot((querySnapshot) =>> { setPosts(querySnapshot); }); })

2. Пожалуйста, добавьте код, связанный с публикациями. Который объявляет, что публикует и изменяет его

3. скорее всего, ваш querySnapshot не является массивом. отладьте или войдите querySnapshot в систему, тогда вы узнаете

4. консоль или отладка querySnapshot и проверьте, какое значение вы получаете

5. Я заметил, что тег <div> в первом блоке кода не был закрыт. Он закрыт в коде, который вы запустили?

Ответ №1:

.forEach может использоваться Sets, Maps повторно и Arrays , в то .map время как может использоваться только над массивами. Таким образом, вполне вероятно , что querySnapshot возвращает набор , который обновляется posts , так posts как теперь является a Set , map не может выполнять итерацию и возвращать значения из итерируемого posts . Чтобы преодолеть это, вы можете преобразовать набор в массив перед обновлением состояния.

 useEffect(() => {
  db.collection('posts').onSnapshot((querySnapshot) => {
    let querySnapshotToArray = Array.from(querySnapshot)
    setPosts(querySnapshotToArray);

  });
})

Теперь, когда это post массив, вы можете сопоставить его и вернуть требуемые значения.

Ответ №2:

когда компонент react отображает сообщения в первый раз null или undefined около .map того, не определено, вам необходимо использовать необязательную цепочку, представленную ?. в JavaScript, которая является новой функцией, введенной в ES2020.

  <div{posts?.map((doc) => <p>{doc?.data()?.text}</p>)}</div>

Ответ №3:

сначала зарегистрируйте свой querySnapshot и посмотрите, является ли он массивом, затем вам следует проверить, не является ли массив сообщений нулевым. попробуйте это :

 <div{posts.length > 0 ? posts.map((doc) => <p>{doc.data().text}</p>) : null}</div>