I call the function inside of useEffect. This means the function is not repeatedly called but for some reason it seems as if the data is being removed after a short period of time
const [following, setFollowing] = useState([])
useEffect(() => {
getUser()
getFollowing()
}, []);
The function here fetches all of the users which the current user is currently following. It seems to work fine and console logging the follower's array returns the users which are expected and appear to render on the screen.
async function getFollowing()
{
const followerRef = query(collection(db, "followers"), where("follower", "==", auth.currentUser.uid));
const querySnapshot = await getDocs(followerRef);
let followerArray = []
querySnapshot.forEach((doc) => {
const storageRef = ref(storage, (doc.data().followingEmail) + "/pp");
getDownloadURL(storageRef).then((url) => {
followerArray.push([doc.data().followingEmail, url, doc.data().following]);
}).catch((error) => {
followerArray.push([doc.data().followingEmail, musicIcon, doc.data().following]);
// setFollowing(followerArray)
});
});
console.log("follower array");
console.log(followerArray);
setFollowing(followerArray)
// console.log(following)
}
This is what I am using to loop through all of the elements. The elements do appear in order and formatted correctly on the page but once they have loaded in they somehow disappear. I am not sure what is causing this. Maybe I should make the page wait until the data has loaded in from firebase. Maybe I should have some conditional statement that stops the data from disappearing.
{following.map((f) =>
<Row key={f[2]} className="hover">
<Col xs={2}>
<div className="">
<img src={f[1]} className="smallPhoto" />
</div>
</Col>
<Col xs={10}className="">
<p className= "followText">{f[0]}</p>
</Col>
</Row>
)}
here is what the output looks like for me when refreshing the page https://giphy.com/gifs/uDtDpY198yCRn6S2CW
I have tried many solutions but none of them are seeming to work.
you are throwing promises inside the foreach, and seting empty array into the state, you should await for the promises to have something inside the array
//this fn should be in another file.
async function getFollowing() {
const followerRef = query(coll(db, "followers"), where(...));
const querySnapshot = await getDocs(followerRef);
let followerArray = [];
const promises = querySnapshot.map((doc) => {
const storageRef = ref(storage, `${followingEmail}/pp`);
// this part is hurting my eyes, xD
// why you are adding [] instead of {} into the array?
return getDownloadURL(storageRef)
.then((url) => followerArray.push([fields]))
.catch((error) => followerArray.push([fields]));
});
});
await Promise.all(promises);
console.log("follower array", followerArray);
return followerArray;
}
//inside your component
const YourComponent = () => {
const [following, setFollowing] = useState([]);
useEffect(() => {
getUser();
getFollowing().then(array => setFollowing(array));
}, []);
};Thank you so much for the support. The program seems to be working as intended now. The change in useEffect I believed made a key difference. This is what my code looks like now:
}, []);
useEffect(() => {
getUser()
getFollowing().then(array => setFollowing(array));
getFollowers()
}, []);
Changes in getFollowing function that helped to resolve the issue
let getFollowing = async () =>
{
const followerRef = query(collection(db, "followers"), where("follower", "==", JSON.parse(localStorage.getItem("userID"))));
let followerArray = [];
await getDocs(followerRef).then((querySnapshot) =>{
querySnapshot.forEach((doc) => {
const storageRef = ref(storage, (doc.data().followingEmail) + "/pp");
getDownloadURL(storageRef)
.then((url) => { followerArray.push([doc.data().followingEmail, url, doc.data().following]);
})
.catch((error) => {followerArray.push([doc.data().followingEmail, musicIcon, doc.data().following]);
});
})
} )
console.log("followerArray", followerArray)
return followerArray;
}