使用 React Js 在 Firebase 实时数据库中获取答案

【问题标题】：Fetching in Firebase Realtime Database with React Js使用 React Js 在 Firebase 实时数据库中获取
【发布时间】：2022-01-17 10:40:49
【问题描述】：

使用 react js 挂钩在 firebase 实时数据库上获取数据时出错。当我使用地图删除数据时，错误即将出现“未定义”，但我在控制台日志中看到数据是成功的。

我认为错误是因为循环代码在获取完成之前执行

这是获取代码

    const [firebaseDb, setFirebaseDb] = useState(database);
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);

    const getData = async () =>{
        try {
            const dbRef = firebaseDb;
            let snapshot = await get(child(dbRef, `menu`))
            if (snapshot.exists()) {
                console.log(snapshot.val());
                setData(snapshot.val());
                setLoading(false);
            } else {
                setData({});
                setLoading(false);
                console.log("No data available");
            }
        } catch(e){
            setLoading(false)
            console.log(e.message);
                        
        }        
        
    } 

    useEffect(() => {
        setLoading(true);
        getData()
    }, []);

这是乱码

            {
                loading ? (
                    <Row><p>Loading ... !</p></Row>

                ) : (
                        <Row>
                            {
                                data.appetizer.map((apper, index) => {
                                    return (
                                        <Col key={index} lg='6' className="p-3">
                                            <div className="menu-list p-3">
                                                <h5>{apper.name}</h5>
                                                <h4>{apper.price}k</h4>
                                                <p className="mb-0">{apper.desc}</p>
                                            </div>
                                        </Col>
                                    )
                                })
                            }
                        </Row>
                    )

            }

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

您的data 变量最初是一个数组，因此它没有appetizer 属性。请改用data.map(...)。（尝试使用数组传递给setData）

当然，渲染总是在获取完成之前执行。您只需要在渲染映射之前检查typeof data.length > 0 ---- 或者只需将loading 的初始值设置为true。

应该是这样的：

const [loading, setLoading] = useState(true);

或者

loading || data.length === 0 ? (
    <Row><p>Loading ... !</p></Row>
)

【讨论】：