Reactjs 无法在react中映射异步数组

我正在从firestore获取数据，这是一个异步的项目数组，当我控制台记录它时，一切正常，它显示我请求的数组，但当我尝试使用array.map在React组件中渲染它时，什么也不显示

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个小时

最好将您从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;

}

---

请确保像我上面所做的那样更新依赖关系数组。

效果用于副作用。就像在生成的HTML上切换CSS类，而不考虑其他任何内容。这几乎肯定不是这样，但更像是状态数据，您需要使用状态。