使用 Firebase 数据库中的数据启动 React 组件? [英] Initiate React components with data from Firebase database?

问题描述

我是 Web 开发的新手.在我的网站中，我有一个留言板，人们可以在留言板上写入我的 Firebase 实时数据库(在/message/"下).编写工作正常，我想将所有消息迭代为组件数组消息"；这将显示在CmsMessages"内组件，像这样:

function CmsMessages() {返回 (<div>{[...Array(5)].map((_, i) => <Message key={i}/>)}//假设我有 5 条消息

)}函数消息(){返回 (<div>消息标题

)}

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

firebase.database().ref("message").on("value", function(snapshot) {让标题 = childSnapshot.val().title})

但我不知道如何让这些数据从功能组件消息"返回，对于我的每条消息.

有人有什么想法吗?谢谢！！！

我想要的结果是消息"下的任何条目的单独组件，放置在 CmsMessages 中，如下所示:

CmsMessages|- 消息(返回:<div>{消息#1的标题}<div>)|- 消息(返回:<div>{消息#2的标题}<div>)|- 消息(返回:<div>{消息#3的标题}<div>)|- 消息(返回:<div>{消息#4的标题}<div>)|- 消息(返回:<div>{消息#5的标题}<div>)

解决方案

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

function Message() {const [title, setTitle] = useState(加载中...");firebase.database().ref("message").on("value", function(snapshot) {setTitle(childSnapshot.val().title);})返回 (<div>{标题}

)}

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

I'm new to web development. In my site I have a message board when people can write to my Firebase Realtime Database (under '/message/'). The writing works fine, and I want to iterate all of the messages as an array of components "Message" that would be displayed inside the "CmsMessages" component, like this:

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

This is how data is called from Firebase:

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

But I could not figured out how to make this data to be returned from a functional component "Message, for each of my messages.

Does anybody have an idea? Thanks!!!

Edit: my wanted result is a separate component for any entry under "message", to be placed inside CmsMessages, like this:

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

解决方案

You'll want to create a state hook for the title, and then call its setter when the data has loaded.

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

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

So here the app starts loading the title from the database when the Message component gets created, and then it updates the state when the title is available. This causes it to re-render the message with the title from the database.

这篇关于使用 Firebase 数据库中的数据启动 React 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！