从Firebase数据库获取数据后如何正确传递props给组件？

ES 模块的导出是静态的，你导出初始空对象dummy之后，后续getItems异步请求完成给dummy赋值的操作，无法触发React组件的重新渲染，所以组件第一次渲染拿到的永远是空对象，就会出现字段undefined的情况。

按如下步骤修改代码即可解决：

1. 修改FetchList.js，把请求逻辑封装为可导出的调用函数，不要在模块顶层预执行：

// FetchList.js
export async function getItems(){
    const response = await fetch('realtime__database__of__firebase__url');
    if (!response.ok) {
        throw new Error("Something went wrong");
    }
    return await response.json();
}

2. 修改ListHospital.js，使用React的useState、useEffect钩子处理异步请求和响应式状态更新，同时添加边界处理避免页面报错：

// ListHospital.js
import { useState, useEffect } from 'react';
import Card from "../UI/Card";
import { getItems } from "./FetchList";

const ListHospitals = () => {
    const [hospitalData, setHospitalData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const data = await getItems();
                setHospitalData(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setIsLoading(false);
            }
        };
        fetchData();
    }, []);

    if (isLoading) return <div>加载中...</div>;
    if (error) return <div>请求出错：{error}</div>;
    if (!hospitalData) return <div>暂无数据</div>;

    return <Card>{hospitalData}</Card>
}

export default ListHospitals;

3. 修正Card组件的字段取值，你的数据结构中图片字段是img_url不是img，避免取值错误：

// Card.js
import classes from "./Card.module.css";

const Card = (props) => {
    const data = props.children;
    console.log(data);
    return <div className={classes.card}>
                <img src={data.img_url} alt={data.Name}></img>
                <h1>{data.Name}</h1>
                <p>{data.Address}</p>
                <h3>Contact</h3>
                <p>{data.Email}</p>
                <p>{data.Contact_no}</p>
    </div>
}

export default Card;

• React只能监听state和props的变化触发重新渲染，不要直接把非响应式的普通变量放到组件渲染逻辑中
• 异步请求建议放在组件的useEffect钩子中执行，不要在模块顶层预执行请求
• 需要处理请求加载中、报错、空数据等边界场景，避免页面白屏或运行时报错

内容的提问来源于stack exchange，提问作者Uttam