I am working with React, and I have a component that gets data from Firebase, which is a list of movies the user has watched.
After getting that data, I loop through that individual movie and get data of the movie. This all happens when the component mount:
useEffect(() => {
getWatched();
}, []);
And getWatched
is the function that gets all the data:
const getWatched = async () => {
try {
const snapShot = await getDocs(
collection(db, "users", auth.currentUser.uid, "Watched")
);
let arr = [];
snapShot.forEach((doc) => {
arr.push(doc.data());
});
let w = [];
arr.forEach((obj) => {
let show = obj.show ? "movie" : "tv";
console.log(obj.id);
const link =
"https://api.themoviedb.org/3/" +
show +
"/" +
obj.id +
"?api_key=" +
process.env.REACT_APP_MOVIE_DB +
"&language=en-US";
fetch(link)
.then((response) => response.json())
.then((response) => w.push(response));
});
setWatched(w);
console.log("Got Data");
} catch (error) {
console.log(error);
}
};
And in the return, I am looping through watched and returning divs of the data I have got. I guess I am getting data late. So it is not showing me anything.
2
Answers
I am satisfied with Youssouf Oumar's answer. Here is another way I have also tried:
The main idea here, as Youssouf Oumar said, is using
Promise.all
.It’s because
setWatched(w)
is being called before the promises resolve. A solution to this is to use aPromise.all()
like so: