在屏幕上显示从Firebase返回的数据 [英] displaying data returned from firebase on screen react

问题描述

我的Firebase查询返回了数据，但是我不知道如何在屏幕上显示.看一下这段代码:

I have data being returned from my firebase query, but I cannot figure out how to display on the screen. take a look at this code:

firestore.collection('profiledata').doc(userID).get().then(doc => console.log(doc.data()))}
         
        render(){
    return(
        <div className='profile'>
            <h1>User</h1>
            {
                this.state.profiledata && 
                    this.state.profiledata.map( profiledata => {
                        return(
                            <div>
                                <p>
                                    First Name
                                    Last Name 
                                    Company Name                        
                                    </p>
                            </div>
                            
                        )
                    })
            }
            </div>
    )
}

其中说出名字，姓氏，公司名称，我需要输出我从行 firestore.collection('profiledata').doc(userID).get()返回的用户的详细信息).then(doc => console.log(doc.data()))在我的控制台中，它正好返回此值:

where it says first name, last name, company name, I need to output the details of the user that I am returning from the line firestore.collection('profiledata').doc(userID).get().then(doc => console.log(doc.data()))} in my console it is returning this exactly:

   {
    "lastname": "x",
    "firstname": "x",
    "companyname": "x"
}

如何将其输出到屏幕?谢谢:)

how do I output this to screen? thanks :)

推荐答案

您只需要将数据设置为您的状态即可.

You just need to set the data in your state.

firestore.collection('profiledata').doc(userID).get().then(doc => this.setState({ profiledata: doc.data() }))}

以及在其中映射数据的地方，您只需输出值

and where you map the data you just output the values

return (
  <div>
    <p>First Name: ${profiledata.firstname}</p>
    <p>Last Name: ${profiledata.lastname}</p>
    <p>Company Name: ${profiledata.companyname}</p>
  </div>
)

这篇关于在屏幕上显示从Firebase返回的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！