在屏幕上显示从 firebase 返回的数据答案

【问题标题】：displaying data returned from firebase on screen react在屏幕上显示从 firebase 返回的数据
【发布时间】：2021-04-05 16:50:45
【问题描述】：

我的 firebase 查询返回了数据，但我不知道如何在屏幕上显示。看看这段代码：

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()))} 行返回的用户的详细信息，它正在准确地返回这个：

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

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

【问题讨论】：

标签： javascript reactjs firebase

【解决方案1】：

你只需要在你的状态下设置数据。

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

在哪里映射数据，你只是输出值

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

【讨论】：