Javascript 如何在reactJS中呈现JSON文件

我有这样的JSON文件

[{
“便利设施”：[“酒吧”、“餐厅”、“学院”、“图书馆”、“学校”、“大学”、“自动取款机”、“银行”、“诊所”、“医院”、“药房”、“疗养院”、“电影院”、“大使馆”、“消防局”、“警察”、“邮局”、“厕所”等]，
“建筑”：[“是”、“公寓”、“平房”、“酒店”、“住宅”、“住宅”、“商业”、“超市”、“学校”、“宗教”、“医院”、“政府”、“学院”]，
“公路”：[“高速公路”、“主干道”、“一级”、“二级”、“三级”、“未分类”、“住宅”、“行人”、“人行道”、“小路”、“公共汽车站”]
}]

---

我需要在react组件中显示这个JSON文件。我需要在第一个选项中显示两个选择选项，我需要在第二个键中选择任何一个3个键，如舒适性、建筑物、高速公路，我需要在第二个对象中显示数组的相应值

您可以轻松地在响应中执行此操作。您只需要通过第一个对象的关键点渲染第一个列表。对于第二个下拉列表，请使用当前选定的类别

const{useffect，useState}=React；
const fetchData=（）=>Promise.resolve([{
“便利设施”：[“酒吧”、“餐厅”、“学院”、“图书馆”、“学校”、“大学”、“自动取款机”、“银行”、“诊所”、“医院”、“药房”、“疗养院”、“电影院”、“大使馆”、“消防局”、“警察”、“邮局”、“厕所”等]，
“建筑”：[“是”、“公寓”、“平房”、“酒店”、“住宅”、“住宅”、“商业”、“超市”、“学校”、“宗教”、“医院”、“政府”、“学院”]，
“公路”：[“高速公路”、“主干道”、“一级”、“二级”、“三级”、“未分类”、“住宅”、“行人”、“人行道”、“小路”、“公共汽车站”]
}]);
常量应用=（道具）=>{
const[data，setData]=useState（[]）；
const[selected，setSelected]=useState（null）；
constchangeselection=（e）=>setSelected（e.target.value）；
useffect（（）=>fetchData（）。然后（json=>setData（json）），[]）；
常量[categories={}]=数据，类型=类别[selected]| |[]；
返回(
{
[“”，…对象.键（类别）].map（类别=>(
{cat}
))
}
{types.map（type=>（{type}））}
);
};
render（，document.getElementById（'react'）

您尝试过什么？包括相关的React组件类代码。我已经尝试使用React功能组件