我正在尝试将[无状态组件] React / Redux应用程序中的select填充为:
const FillSelect = ({team}) => <option value={team.onboardingOrder}>{team.name}</option>
const TeamSelector = ({teams}) => {
return (
<select>
<option value="">All</option>
{
teams ? (teams => teams.map(team => <FillSelect team={team} />)) : null
}
</select>
)
}
小组看起来像是:{0:{id: 1, name: "Program Management", onboardingOrder: 0, …}, 1: {id: 2, name: "Value Capture", onboardingOrder: 1, …}…}
。
它返回错误:Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
in select ...
这是因为我使用的是map()
吗?这样做的正确方法是什么?
答案 0 :(得分:3)
你不是直接打电话给地图;如果teams
是真实的,则返回一个函数(teams => ...
)。您可能希望该行看起来像这样:
teams ? teams.map(team => <FillSelect team={team} />) : null
哪会产生<FillSelect />
的数组。
答案 1 :(得分:0)
这很好用:
return (
<select>
<option value="">All</option>
{
Object.values(teams).map((team, i) => <option value={team.onboardingOrder} key={i}>{team.name}</option> )
}
</select>
)