使用 Firebase 数据库中的数据启动 React 组件？

Posted 2023-02-22

【中文标题】使用 Firebase 数据库中的数据启动 React 组件？

【英文标题】：Initiate React components with data from Firebase database?

【发布时间】：2021-01-20 06:49:36

【问题描述】：

我是网络开发的新手。在我的网站上，我有一个留言板，人们可以写信给我的 Firebase 实时数据库（在“/message/”下）。写作工作正常，我想将所有消息迭代为组件数组“Message”，这些组件将显示在“CmsMessages”组件内，如下所示：

function CmsMessages () 
    return (
        <div>
            [...Array(5)].map((_, i) => <Message key=i />) // say I have 5 messages
        </div>
    )

function Message () 
    return (
        <div>
            message title
        </div>
    )

这是从 Firebase 调用数据的方式：

firebase.database().ref("message").on("value", function(snapshot) 
 let title = childSnapshot.val().title
)

但我不知道如何使这些数据从功能组件“消息”中返回，用于我的每条消息。

有人有想法吗？谢谢！！！

编辑：我想要的结果是“消息”下任何条目的单独组件，放置在 CmsMessages 中，如下所示：

CmsMessages
|
- Message (return: <div>title of message #1<div>)
|
- Message (return: <div>title of message #2<div>)
|
- Message (return: <div>title of message #3<div>)
|
- Message (return: <div>title of message #4<div>)
|
- Message (return: <div>title of message #5<div>)

【问题讨论】：

请将您的数据库内容的示意图替换为实际的 JSON（作为文本，请不要截图）。您可以通过单击 Firebase Database console 的溢出菜单 (⠇) 中的“导出 JSON”链接来获取此信息。

【参考方案1】：

您需要为标题创建一个状态挂钩，然后在加载数据时调用它的设置器。

function Message () 
    const [title, setTitle] = useState("Loading...");

    firebase.database().ref("message").on("value", function(snapshot) 
      setTitle(childSnapshot.val().title);
    )
 
    return (
        <div>
            title
        </div>
    )

因此，当Message 组件被创建时，应用程序开始从数据库中加载标题，然后在标题可用时更新状态。这会导致它使用数据库中的标题重新呈现消息。

【讨论】：

感谢@frank，但这只是一次又一次地为最后一个数据库条目打印组件...而不是为每条消息启动一个组件。

我不确定我是否理解这种情况下的问题所在，而您的问题中的代码肯定缺少这一点。如果您的问题是关于如何处理数据库中的多个子节点，请编辑您的问题以在/message 下显示 JSON（作为文本，请不要截图）。您可以通过单击 Firebase Database console 的溢出菜单 (⠇) 中的“导出 JSON”链接来获取此信息。

我想为“消息”下的每个条目启动一个新组件。在这些组件中，我想要每个条目的“title”值：