Javascript 显示映射数据而不在显示前单击

我的数据有点困难。我目前能够获取所有映射数据，但如果不单击类别，数据将不会显示

下面是一个例子：

const categoriesData=[
{ 
名称：'全部'，
标签：“全部”，
总数：'18'，
类名：“activeCategory”
},
{ 
名称：'商业服务'，
标签：“商业服务”，
总数：'18'
},
{ 
名称：“设计服务”，
标签：“设计服务”，
总数：'18'
},
{
名称:"教育服务",，
标签：“教育服务”，
总数：'18'
},
{
名称：“金融服务”，
标签：“金融服务”，
总数：'18'
},
{
名称：“IT服务”，
标签：“IT_服务”，
总数：'18'
},
{
名称：'法律服务'，
标签：“法律服务”，
总数：'18'
},
{
名称：“制造业”，
标签：“制造业”，
总数：'18'
},
{
名称：'营销'，
标签：“营销”，
总数：'18'
}
];
常数postsData={
全部：[
{id:1，名称：'Post 3'}，
{id:2，名称：'post2'}
],
商业服务：[
{id:1，名称：'Post 3'}，
{id:2，名称：'post2'}
],
设计服务：[
{id:1，名称：'Post 5'}，
{id:2，名称：'post2'}
],
教育服务：[
{id:1，名称：'Post 1'}，
{id:2，名称：'post2'}
],
金融服务：[
{id:1，名称：'Post 1'}，
{id:2，名称：'post2'}
],
资讯科技服务：[
{id:1，名称：'Post 1'}，
{id:2，名称：'post2'}
],
法律服务：[
{id:1，名称：'Post 1'}，
{id:2，名称：'post2'}
],
制造业：[
],
营销：[
{id:1，名称：'Post 1'}，
{id:2，名称：'Post 27675'}
]
};
函数fakePostsApi（catName）{
返回新承诺（（解决）=>
设置超时（（）=>{
解决（postsData[catName]）；
}, 1000)
);
}
函数Main（）{
const[categories，setCategories]=React.useState（categoriesData）；
const[catName，setCatName]=React.useState（）；
const[posts，setPosts]=React.useState（[]）；
React.useffect（（）=>{
if（catName）{
fakePostsApi（猫名）
.然后（设置柱）；
}
}，[catName]）；
返回(
{categories.length>0(
categories.map（（categories，i）=>{
返回(
setCatName（category.label）}>
{category.name}
);
})
) : (
加载

)}
{posts.length==0(
没有帖子

) : (
posts.map（（post）=>{post.name}）
)}
);
}
ReactDOM.render(
,
根
)

---

将

catName

的默认值设置为类别0项的标签：

const [catName, setCatName] = React.useState(categories[0] && categories[0].label);

或者，如果支持：

const [catName, setCatName] = React.useState(categories[0]?.label);

const categoriesData=[{“name”：“All”，“label”：“All”，“total”：“18”，“className”：“activeCategory”}，{“name”：“Business Services”，“label”：“Business\u Services”，“total”：“18”}，{“name”：“Design Services”，“label”：“Design\u Services”，“total”：“18”；“Education Services”，“label”：“Education\u Services”，“total”：“18”{“name”：“Finance Services”，“label”：“Finance Services”：“金融服务”、“总计”：“18”{“名称”：“IT服务”、“标签”：“IT服务”、“总计”：“18”{“名称”：“法律服务”、“标签”：“法律服务”、“总计”：“18”{“名称”：“制造”、“标签”：“制造”、“总计”：“18”{“名称”：“营销”、“标签”：“营销”、“总计”：“18”；
const postsData={“All”：[{“id”：1，“name”：“Post 3”}，{“id”：2，“name”：“Post 2”}]，“Business_Services”：[{“id”：1，“name”：“Post 3”}，{“id”：2，“name”：“Post 2”}]，“Design_Services”：[{“id”：1，“name”：“Post 5”}，{“id”：2，“name”：“教育服务”：“Post 1”}，{“id”：2，“name”：“Post 2”}，{“Post 2”；“name”：“Post 2”}，{“id”：“Post 2”名称“：“Post 2”}]，“IT服务”：[{“id”：1，“名称”：“Post 1”}，{“id”：2，“名称”：“Post 2”}]，“法律服务”：[{“id”：1，“名称”：“Post 1”}，{“id”：2，“名称”：“Post 2”}]，“制造”[]，“营销”：[{“id”：1，“名称”：“Post 1”}，{“id”：2，“名称”：“Post 27675”}]；
函数Main（）{
const[categories，setCategories]=React.useState（categoriesData）；
const[catName，setCatName]=React.useState（类别[0]&类别[0].label）；
const[posts，setPosts]=React.useState（[]）；
React.useffect（（）=>{
if（catName）{
fakePostsApi（猫名）
.然后（设置柱）；
}
}，[catName]）；
返回(
{categories.length>0(
categories.map（（categories，i）=>{
返回(
setCatName（category.label）}>
{category.name}
);
})
) : (
加载

)}
{posts.length==0(
没有帖子

) : (
posts.map（（post）=>{post.name}）
)}
);
}
函数fakePostsApi（catName）{
返回新承诺（（解决）=>
设置超时（（）=>{
解决（postsData[catName]）；
}, 1000)
);
}
ReactDOM.render(
,
根
)