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

Question

我在使用 react js hook 在 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>
                    )

            }

Answer 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>
)

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

Fetching in Firebase Realtime Database with React Js

javascript

firebase

reactjs

firebase-realtime-database