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

IT技术 arrays reactjs firebase firebase-realtime-database components
2021-04-01 15:26:55

我是网络开发的新手。在我的站点中，我有一个留言板，当人们可以写入我的Firebase 实时数据库（在“/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>)
1个回答

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

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

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

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

我不确定我是否理解这种情况下的问题所在，并且您问题中的代码中确实缺少这一点。如果您的问题是关于如何处理数据库中的多个子节点，请编辑您的问题以在下方显示 JSON /message（作为文本，请不要截图）。您可以通过单击Firebase 数据库控制台上溢出菜单 (⠇) 中的“导出 JSON”链接来获取此信息。
2021-06-08 15:26:55
谢谢@frank，但这只是一次又一次地为最后一个数据库条目打印组件......而不是为每条消息启动一个组件。
2021-06-18 15:26:55
我想为“消息”下的每个条目启动一个新组件。在这些组件中，我想要每个条目的“title”值：
2021-06-21 15:26:55
其它你可能感兴趣的问题
上一篇可编辑的表单 ReactJS 下一篇使用与 mapStateToProps 连接时，“无法读取未定义的属性‘地图’”