Write fetched data to variable from firebase realtime database react

Question

I'm trying to save fetched data into variable, but I always get "too many rerenders" or "undefined". What I'm doing wrong

import {
  child,
  get,
  getDatabase,
  ref,
} from "firebase/database";

const db = getDatabase();

function App() {
  const [data, setData] = useState();
  const getData = ref(db);

  useEffect(() => {
    const fetch = () => {
      get(child(getData, "tokens/")).then((snapshot) => {
        const fetched = snapshot.val();
        setData(fetched);
      });
      setTimeout(() => {
        console.log(data);
      }, 500);
    };
    fetch();
  }, []);
}

Dharmaraj · Accepted Answer · 2022-03-30 19:33:29Z

3

There's no need of setTimeout(). You can print the data when the promise is resolved as shown below:

function App() {
  const [data, setData] = useState();
  const getData = ref(db);

  useEffect(() => {
    const fetchData = () => {
      get(child(getData, "tokens/")).then((snapshot) => {
        const fetched = snapshot.val();
        console.log(fetched)
        setData(fetched);
      }); 
    };
    fetchData();
  }, []);
}

Also I've renamed the fetch function to avoid any confusion with Fetch API

answered Mar 30, 2022 at 19:33

Dharmaraj

51.3k8 gold badges67 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Daniil Galitskii Over a year ago

But when I try to call "data" variable, trying to parse it or just log it, i got undefined if it was out of function, and got to many rerenders inside the function

Dharmaraj Over a year ago

@DaniilGalitskii thats because the promise returned by get might not have resolved yet.. The then block executes when data is received or promise is resolved so data will be logged for sure.. then you set data to state.. unsure why you need to log data there.. checkout stackoverflow.com/questions/14220321/…

Dharmaraj Over a year ago

@DaniilGalitskii can you share a screenshot with your database and then explain what data are you trying to read?

Dharmaraj Over a year ago

@DaniilGalitskii Object.values(fetched) can you console log this in then then block and try? Perhaps that's what you are looking for. Then set this in data state and render in UI

Dharmaraj Over a year ago

You're welcome, checkout MDN its one of the best source to learn JS

|

Collectives™ on Stack Overflow

Write fetched data to variable from firebase realtime database react

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related