渲染从 firebase 收集的实时数据时出现问题

Question

我在 firebase 集合上存储了一些数据，通过以下代码我能够在控制台上获取该数据，但我无法在我的网站前端呈现它。 我是 firebase 的新手，有人可以帮我更正我的代码吗？

import React, { useState, useEffect} from 'react'
import "./Feed.css"
import MessageSender from './MessageSender'
import Post from './Post'
import StoryReel from "./StoryReel"
import db from "./firebase"
import { query, getDocs, onSnapshot, collection } from 'firebase/firestore';

function Feed() {
  const colRef = collection(db, 'posts')
  const posts =[]

onSnapshot(colRef, (snapshot) => {
      snapshot.docs.map((doc) =>{            
        posts.push({data:doc.data(), id: doc.id})
      })
      console.log(posts)
     } )    


  return (
    <div className="Feed">
        <StoryReel />
        <MessageSender />

      {posts.map((post) => {
          <Post
            key={post.id}
            profilePic={post.data.profilePic}
            message={post.data.message}
            timestamp={post.data.timestamp}
            username={post.data.username}
            image={post.data.image}
          />
        })}
       
    </div>
  )
}

export default Feed

Answer 1

由于您使用的是 React，因此您可以在帖子更改时使用useState重新渲染。

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

onSnapshot(colRef, (snapshot) => {
      const tempPosts = []
      snapshot.docs.map((doc) =>{            
        tempPosts.push({data:doc.data(), id: doc.id})
      })
      console.log(tempPosts)
      setPosts(tempPosts)
     } )