javascript - Reactjs/SemanticUi 在地图中添加 if 条件
问题描述
我想要的是在函数if
内添加条件map
,但没有成功:
const CityOptions = Data.CityData.map((state, index) => ({
key: index,
text: state.name,
value: state.id,
}));
render(){
return(
<Dropdown
id="City"
search selection
options={CityOptions}
></Dropdown>
}
}
我试过:
<Dropdown
id="City"
search selection
>
{Data.CityData.map((v,i) => {
if(v.pid === this.state.cityValue){
return (
<option key={i} value={v.id}>{v.name}</option>
)
}
return true
})}
</Dropdown>
错误:
React.Children.only 期望接收单个 React 元素子元素。
并且:
<Dropdown
id="City"
search selection
options={CityOptions.pid === this.state.cityValue ? CityOptions : null}
/>
结果:
没有数据
解决方案
你可以filter
先
Data.CityData.filter(x => x.pid === this.state.cityValue).map((v,i) =>{
return <option key={i} value={v.id}>{v.name}</option>
})
根据语义用户界面的文档 options
是array
遵循objects
模式的{ text: '', value: '' }
,所以你需要像这样传递它
const CityOptions = Data.CityData.filter(x => x.pid === this.state.cityValue).map((v,i) =>{
return{
key: v.id,
value: v.id,
text: v.text
}
})
推荐阅读
- terraform - 运行 EMR 作业流程时出错:ValidationException
- web-scraping - Python 从网络标头请求 403 Forbidden referer
- docker - 如何在 Host 模式下使用服务名访问容器?
- android - 如何在 Jetpack Compose 中使用图标切换按钮?
- image - 对 kubernetes 映像进行 prisma 扫描,其中 pip 易受攻击
- android - 测试使用导航的 Android 片段
- postgresql - 使用默认自定义集群安装 PostgreSQL 11
- arrays - MongoDB 在删除/订单更改时更改数据的索引
- sql - 返回一列,按 ID 显示记录表中每行的最后一个已知值 (MAX DateTime) - SQL
- reflection - 在 F# 中检索记录字段的值时获取可选类型的值