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();
  }, []);
}

score 2 · Accepted Answer · answered Mar 30 '22 at 19:33

2

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 '22 at 19:33

Dharmaraj

47,845
8
52
84

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 – Daniil Galitskii Mar 31 '22 at 03:28
1

@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 https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call – Dharmaraj Mar 31 '22 at 04:03
I need to get urls and token names from this data, so I fetch an object, which contains token_0, token_1, ... At these tokens I have 2 more data - url and token name, so i need array of this tokens_n, to take url into img tag and name into p tag, I hope I explained good enough :D – Daniil Galitskii Mar 31 '22 at 06:38
1

@DaniilGalitskii can you share a screenshot with your database and then explain what data are you trying to read? – Dharmaraj Mar 31 '22 at 06:39
updated the question, there is screenshot, url want to add into and name into
– Daniil Galitskii Mar 31 '22 at 06:43
1

@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 Mar 31 '22 at 06:55
Thanks a lot, before now I didn't know about `Object.value` , you are very smart ! Thank you ! – Daniil Galitskii Mar 31 '22 at 07:22
1

You're welcome, checkout [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values) its one of the best source to learn JS – Dharmaraj Mar 31 '22 at 07:23

Write fetched data to variable from firebase realtime database react

1 Answers1