useEffect to get firebase data not working - reactjs

Question

Ok so i use the useEffect to get firebase firestore data. This is my hook code:
const [campaign, setCampaigns] = useState([])
useEffect(() => {
var docRef = db.collection("campaigns").doc(slug);
docRef.get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
setCampaigns(doc.data())
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
},[]);
console.log(campaign[0].startDate.seconds) // gives the error stated below
console.log(campaign.images[0].url)// gives the error stated below
The response is:
I can get access to all the top level properties such as body, campaignPolicy etc. but if I do
TypeError: Cannot read property 'seconds' of undefined
If I do campaign.startDate.seconds i get same error:
TypeError: Cannot read property 'seconds' of undefined
Full minimal code:
const ReviewComponent = (props) => {
const [open, setOpen] = useState(false)
const [campaigns, setCampaigns] = useState([])
const [currentCampaign, setCurrentCampaign] = useState([])
//First useEffect hook
const tempDoc = []
useEffect(() => {
var docRef = db.collection("campaigns");
docRef.get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
tempDoc.push({ id: doc.id, ...doc.data() })
// doc.data() is never undefined for query doc snapshots
setCampaigns(tempDoc)
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
},[]);
//Second use effect hook
useEffect(() => {
const docRef = db.collection("campaigns").doc(slug);
docRef.get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
setCurrentCampaign(doc.data())
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
},[]);
const handleOpen = () => {
setOpen(true)
};
const handleClose = () => {
setOpen(false);
};
if(currentCampaign[0]) { // Or if(campaign[0])
console.log(currentCampaign)
}
return(
<Typography>
{currentCampaign.reviews[0].text}
</Typography>
)

Answer 1

You are trying to access your data before they are retrieved. Here is what happens:
// First render
You set your state as an empty array
You declare an effect with a callback that will be called after the first render
You try to access a value that is indeed undefined (your array is empty at this point) and your app crash
// Second render
Your code crash at the first render but if it didn't:
Your state now contains your data
Your effect will not be called as you have an empty dependency array
You can use your data
To make your code work, and you should do it every time you load data asynchronously, is to check that your data are loaded.
const [campaign, setCampaigns] = useState([]);
useEffect(() => {
const docRef = db.collection("campaigns").doc(slug);
docRef.get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
setCampaigns(doc.data())
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
},[]);
if(campaign.length > 0) { // Or if(campaign[0])
console.log(campaign[0].startDate.seconds)
console.log(campaign[0].images[0].url)
}

Answer 2

The default value of campaign is empty array and it is set after few time from firebase store.
So you should check campaign state what is empty or has value.
if (campaign.length == 0)
console.log(campaign[0].startDate.seconds);