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

Question

我是网络开发的新手。在我的网站上，我有一个留言板，人们可以写信给我的 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>)

Answer 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 组件被创建时，应用程序开始从数据库中加载标题，然后在标题可用时更新状态。这会导致它使用数据库中的标题重新呈现消息。