Невозможно отобразить массив asyn c в ответ

Question

Я извлекаю данные из firestore (массив элементов), который является асинхронным, и когда я консольный журнал, все хорошо (он отображает массив, который я запрашиваю), но когда я пытаюсь отобразить его в React Component при использовании Array.map ничего не отображается.

import React, {useEffect} from 'react';

const Likes = props =>{
     const likedPosts = []
     useEffect(() => {
        db.collection('postLikes')
            .where('postID', '==', props.uid)
            .get()
            .then(function(querySnapshot) {
                querySnapshot.forEach(function(doc) {
                    likedPosts.push(doc.data())
                })
            })
    }, [])

    return(
      <div>
        {likedPosts.map(post =>{
         return(
          <h1>{post.whoLiked}</h1>
         )
      })}
      </div>
    )


}

И после этого по какой-то причине ничего не отображается. Я попробовал буквально все. Я застрял на этом на 3 часа

Answer 1

Хорошей идеей будет вернуть данные, которые вы вернете из Firebase, в локальное состояние, а затем отобразить их. Так что я бы сделал настройку следующим образом:

Правка: немного больше объяснения того, что происходит: эффект запускается асинхронно с первым рендером. Таким образом, пока вы возвращаете данные из FB, вы уже визуализировали начальное значение массива (которое пусто). И когда вы получаете данные BACK от FB, вы не говорите React обновить ваш компонент (используя setState), поэтому старые данные все еще отображаются. Ниже я добавил соответствующий вызов setState, чтобы добавить новый массив в локальное состояние и инициировать повторный рендеринг.

const Likes = props =>{
     const [posts, setPosts] = useState([]);

     useEffect(() => {
        const likedPosts = [];
        db.collection('postLikes')
            .where('postID', '==', props.uid)
            .get()
            .then(function(querySnapshot) {
                querySnapshot.forEach(function(doc) {
                    likedPosts.push(doc.data())
                })
                setPosts(likedPosts);
            })
    }, [props.uid]);

    return posts.length > 0 ? (
      <div>
        {posts && posts.map(post =>{
         return(
          <h1>{post.whoLiked}</h1>
         )
      })}
      </div>
    ) : null;

}

Убедитесь, что обновили массив зависимостей, как я делал выше.