Блог

Я извлекаю данные из коллекции firebase cafes в вызываемый компонент React CafeReviews , а затем устанавливаю эти данные в вызываемую переменную состояния cafe . Возвращаемые данные имеют следующую форму:

 {
 name: cafe name,
 photoURL: photo url
}
 

Странное поведение заключается в том, что иногда данные отображаются в браузере, но в других случаях браузер выходит из строя и выдает следующую ошибку:

TypeError: cafe.data() is not a function

Я предполагаю, что это асинхронная ошибка — браузер загружает компонент до того, как состояние было установлено. Итак, как мне установить состояние внутри .then блока, который сам находится внутри useEffect перехвата?

Вот компонент полностью:

 import React, { useState,useEffect } from 'react'
import db from '../fbConfig'

const CafeReviews = ({match}) => {

    const [cafe,setCafe] = useState([])
    let id = match.params.id

 useEffect(() => {
        db.collection('cafes')
        .doc(id)
        .get()
        .then(snapshot => {
          setCafe(snapshot)
        })
    },[])

    return(
        <div>
           <h1>{cafe.data().name}</h1> 
        </div>
    )
}

export default CafeReviews
 

Ваше начальное состояние для cafe is [] , поэтому, когда вы вызываете cafe.data() это, оно выдает ошибку, которую вы получаете. Вам нужно убедиться, что ваш код рендеринга обрабатывает как начальное состояние, так и данные из базы данных, обычно обеспечивая их одинаковую форму.

Например:

 const [cafe,setCafe] = useState({ name: "loading..." })