I have a React component rendering cafe' and 'cafe review' data. I'm making two API calls - one to my cafes
collection, the the other to my reviews
collection, and I've put them both inside a useEffect
hook, as follows:
const [cafe,setCafe] = useState({name:'',photoURL:'',address:'',phoneNumber:'', website:''})
const [reviews,setReviews] = useState({blurb:'', cafeName:'',stars:'',title:'',userName:''})
let id = match.params.id
useEffect(() => {
db.collection('cafes')
.doc(id)
.get()
.then(snapshot => {
setCafe({
name: snapshot.data().name,
photoURL: snapshot.data().photoURL,
address: snapshot.data().address,
phoneNumber: snapshot.data().phoneNumber,
website: snapshot.data().website
})
})
db.collection('reviews')
.get()
.then(snapshot => {
console.log(snapshot.data()) //*this* yeilds the error
})
},[])
The call to the cafes
collection is working successfully, and is returning all the data. However the second call to the reviews
collection is failing. When I log snapshot.data()
to the browser I get the following error:
Unhandled Rejection (TypeError): snapshot.data is not a function
This is strange because performing the equivalent log on the cafes
api call successfully shows the object in the browser.
I tried adding some conditional code, which failed to yield any data:
db.collection('reviews')
.get()
.then(doc => {
if(doc && doc.exists){
console.log(doc.data())
} else {
console.log('no doc')
}
})
Any suggestions on how I can get both API calls to return data? Am I using useEffect wrong here?
question from:
https://stackoverflow.com/questions/65947099/unhandled-rejection-typeerror-snapshot-data-is-not-a-function-when-calling 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…