Блог

У меня есть компонент React, отображающий данные cafe’ и ‘обзор кафе’. Я делаю два вызова API — один для моей cafes коллекции, другой для моей reviews коллекции, и я поместил их оба в useEffect перехват следующим образом:

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

 

Вызов cafes коллекции успешно работает и возвращает все данные. Однако второй вызов reviews коллекции завершается неудачно. Когда я захожу snapshot.data() в браузер, я получаю следующую ошибку:

Unhandled Rejection (TypeError): snapshot.data is not a function

Это странно, потому что выполнение эквивалентного журнала при cafes вызове api успешно показывает объект в браузере.

Я попытался добавить некоторый условный код, который не дал никаких данных:

 
db.collection('reviews')
        .get()
        .then(doc => {
            if(doc amp;amp; doc.exists){
            console.log(doc.data())
            } else {
                console.log('no doc')
            }
        })
 

Любые предложения о том, как я могу получить оба вызова API для возврата данных? Я неправильно использую useEffect здесь?

Когда вы вызываете get() коллекцию, вы получаете обратно a QuerySnapshot , который представляет список документов. Вам нужно будет перебрать этот снимок, чтобы получить отдельные документы, из которых вы можете получить данные:

 db.collection('reviews')
.get()
.then(snapshot => {
  snapshot.forEach((doc) =>
    console.log(doc.data())
  })
})
 

Как и в случае любого из этих типов синтаксических ошибок, я настоятельно рекомендую держать справочную документацию Firestore открытой, поскольку их проще всего обнаружить, следуя по следу от CollectionReference.get() вызова.