.then 块内的奇怪设置状态行为答案

【问题标题】：Strange set state behaviour inside .then block.then 块内的奇怪设置状态行为
【发布时间】：2021-01-28 02:10:00
【问题描述】：

我正在将来自 firebase 集合 cafes 的数据提取到名为 CafeReviews 的 React 组件中，然后将该数据设置为名为 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.data 成为一个函数？该方法是什么时候定义的？
你想在这个组件中显示咖啡馆列表还是一个咖啡馆？

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

cafe 的初始状态是 []，所以当你调用 cafe.data() 时，它会给出你得到的错误。您需要确保您的渲染代码同时处理初始状态和数据库中的数据，通常是通过确保它们具有相同的形状。

例如：

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

【讨论】：