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


}

然后由于某种原因它什么也不显示。我确实尝试了一切。我被坚持了三个小时

Answer 1

将从Firebase取回的数据设置为本地状态，然后进行渲染是一个好主意。因此，我将进行如下调整：

编辑：更多解释，所发生的是该效果与第一个渲染异步运行。因此，当您从FB取回数据时，您已经呈现了初始数组值（为空）。而且，当您从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;

}

请确保如上所述更新您的依赖项数组。

无法在反应中映射异步数组

1 个答案: