want to retrieve data from Firebase database in react-CodePudding

I am trying to display a list of post from the Firebase database in react but it displays nothing, I do not know where I made mistake.i am using firebase version 9. i think i made a mistake in useEffect section note: it displays post list from the given array but i want to display from the database

here is my app.js code:

import { useState, useEffect } from "react";
import "./App.css";
import {db} from "./firebase";
import Post from "./Post";

import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';

function App() {
  const [posts, setposts] = useState([
    //  {
    //    username: "golam Rabbani",
    //    userUrl: "https://www.logogenie.net/images/articles/instagram-logo2.jpg",
    //    usercaption: "this is really cool caption",
    //  },
    //  {
    //    username: "golam Rabbani",
    //    userUrl: "https://www.logogenie.net/images/articles/instagram-logo2.jpg",
    //    usercaption: "this is really cool caption",
    //  },
  ]);

  
   useEffect(() => {
   
    async function getPost(db) {
      const postCol = collection(db, 'posts');
      const postSnapshot = await getDocs(postCol);
      const postList = postSnapshot.docs.map(doc => doc.data());
      return postList;
    }



   }, []); //[post]for every single time post change code will run again,for[] run only once
  return (
    <div className="app">
      {/* header */}
      <div className="app__header">
        <img
          alt="headerimg"
          className="app__header__img"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/1200px-Instagram_logo.svg.png"
        />
      </div>
      <h1>
        this is for learning purpose and many thing that i belive and i will
        continue so
      </h1>

      {posts.map((post) => (
        <Post
          username={post.username}
          userUrl={post.userUrl}
          caption={post.caption}
        />
      ))}
    </div>
  );
}

export default App;

CodePudding user response：

Here's a working code:

function App() {
  const [posts, setposts] = useState([]);

   useEffect(() => {
    const q = query(collection(db, 'posts'))
    onSnapshot(q, (querySnapshot) => {
      setposts(querySnapshot.docs.map(doc => ({
        data: doc.data()
      })))
    })
   }, []); //[post]for every single time post change code will run again,for[] run only once
  return (
    <div className="app">
      {/* header */}
      <div className="app__header">
        <img
          alt="headerimg"
          className="app__header__img"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/1200px-Instagram_logo.svg.png"
        />
      </div>
      <h1>
        this is for learning purpose and many thing that i belive and i will
        continue so
      </h1>

      {posts.map((post) => (
        <Post
          username={post.username}
          userUrl={post.userUrl}
          caption={post.caption}
        />
      ))}
    </div>
  );
}

export default App;

If you have a use-case and still need to use async function inside the useEffect(). Use the code below:

   useEffect(() => {
   
    const getPost = async () => {
      const postCol = collection(db, 'users');
      const postSnapshot = await getDocs(postCol);
      const postList = postSnapshot.docs.map(doc => doc.data());
      // Set the result to the useState.
      setposts(postList);
    }
    // Call the async function.
    getPost()
      .catch(console.error);

   }, []); //[post]for every single time post change code will run again,for[] run only once

You may want to check this blog for examples using async inside the useEffect.