Javascript 奇怪的设置状态行为。然后阻塞

我将数据从firebase集合

cafes

拉入名为

CafeReviews

的React组件，然后将该数据设置为名为

cafes

的状态变量。 返回的数据具有以下形状：

{
 name: cafe name,
 photoURL: photo url
}

奇怪的行为是，有时数据会呈现给浏览器，但有时浏览器会崩溃并出现以下错误：

TypeError:cafe.data（）不是函数

我假设这是一个异步错误——浏览器在设置状态之前加载组件。那么，我如何在

中设置状态。然后
块本身在
useffect
钩子中

以下是完整的组件：

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

import React，{useState，useffect}来自“React”
从“../fbConfig”导入数据库
常量CafeReviews=（{match}）=>{
const[cafe，setCafe]=useState（[]）
让id=match.params.id
useffect（（）=>{
db.集合（“咖啡馆”）
.doc（id）
.get（）
。然后（快照=>{
setCafe（快照）
})
},[])
返回(
{cafe.data（）.name}
)
}
导出默认CafeReviews
您的
cafe
的初始状态是
[]
，因此当您调用
cafe.data（）
时，它会给出您得到的错误。您需要确保渲染代码处理初始状态和数据库中的数据，通常是通过确保它们具有相同的形状

例如：

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

为什么您希望cafe.data是一个函数？该方法何时定义？是否要在此组件中显示咖啡馆列表或一个咖啡馆？