Javascript React JS-Firebase使用map方法在组件中显示数据

我对编码相当陌生。我正在研究ReactJS，我试图在一个列表中显示Firebase数据库中的所有不同类别。 您可以在下面看到我编写的代码：

从“下一个/链接”导入链接
从“React”导入React，{Component}
从“firebase”导入firebase
导出默认类扩展页面{
构造函数（）{
超级（）
此.state={
数据集：“”
}
}
组件安装（）{
firebase.initializeApp（客户端凭据）
//------连接到firebase数据库--------////
firebase.database（）.ref（）.orderByChild（“sectionIndex”）
.on（“添加了child_”，
快照=>{this.setState（{datas:snapshot.val（）.category}）；}，
error=>{console.log（“error:+error.code）；}）；
}
渲染（）{
返回(

{this.state.datas.map（（数据，i）=>
{data.category}

)
}
}

Firebase使用

snapshot.val（）.category

从数据库返回对象。如果将其保存为数组，返回的对象将如下所示：

{
 "1": "data",
 "2": "data2",
}

您可以使用

Object.values（）

获取数组，它从对象获取所有值并返回该值的数组

我将从数据库中编写保存，如下所示：

或将映射调用重写为：

Object.values(this.state.datas).map((data, i) => 
          <li key={i}> {data.category} </li>
)

Object.values（this.state.datas）.map（（data，i）=>
{data.category}
)

Firebase使用

snapshot.val（）.category

从数据库返回对象。如果将其保存为数组，返回的对象将如下所示：

{
 "1": "data",
 "2": "data2",
}

您可以使用

Object.values（）

获取数组，它从对象获取所有值并返回该值的数组

我将从数据库中编写保存，如下所示：

或将映射调用重写为：

Object.values(this.state.datas).map((data, i) => 
          <li key={i}> {data.category} </li>
)

Object.values（this.state.datas）.map（（data，i）=>
{data.category}
)

只需控制台日志

this.state.datas

即可查看它的外观。Firebase没有集合，因此它可能只是一个简单的对象，以数字作为键。要转换为数组，请查看以下问题：只需控制台日志

this.state.datas

即可查看它的外观。Firebase没有集合，因此它可能这只是一个以数字为键的简单对象。要转换为数组，请看以下问题：