Javascript 带有选项的Reactjs动态optgroup

我试图映射一个数组，创建一个带有optgroups的select，然后是它的opts。但是，下面的代码将只输出optgroup

<select name="clients">
  {this.props.clients &&
    this.props.clients.length > 0 &&
    this.props.clients.map((e, key) => {
      return (
        <optgroup key={key} label={e.name}>
          {e.projects.map((project, projectKey) => {
            <option key={projectKey} value={project.id}>
              {project.name}
            </option>;
          })}
        </optgroup>
      );
    })}
</select>

{this.props.clients&&
this.props.clients.length>0&&
this.props.clients.map（（e，key）=>{
返回(
{e.projects.map（（project，projectKey）=>{
{project.name}
;
})}
);
})}

您知道如何获得选项输出吗？

您的内部

map（）

函数没有返回任何对象。在

元素前面添加

return

<select name="clients">
    {this.props.clients && this.props.clients.length > 0 && this.props.clients.map((e, key) => {
        return <optgroup key={key} label={e.name}>
            {e.projects.map((project,projectKey) => {
                return <option key={projectKey} value={project.id}>{project.name}</option>
            })}
        </optgroup>;
    })}
</select>

{this.props.clients&&this.props.clients.length>0&&this.props.clients.map（（e，key）=>{
返回
{e.projects.map（（project，projectKey）=>{
返回{project.name}
})}
;
})}

您的内部

map（）

函数没有返回任何对象。在

元素前面添加

return

<select name="clients">
    {this.props.clients && this.props.clients.length > 0 && this.props.clients.map((e, key) => {
        return <optgroup key={key} label={e.name}>
            {e.projects.map((project,projectKey) => {
                return <option key={projectKey} value={project.id}>{project.name}</option>
            })}
        </optgroup>;
    })}
</select>

{this.props.clients&&this.props.clients.length>0&&this.props.clients.map（（e，key）=>{
返回
{e.projects.map（（project，projectKey）=>{
返回{project.name}
})}
;
})}

好的，检查一下。我的React项目中有以下两个文件。第一个已经包含一些虚拟状态数据，例如，调用我的端点并填充我的状态，并创建我的下拉组件的实例

在我的fetch中，我还有一些逻辑来动态创建类别组，以便在我的optgroup定义中使用。还有一项检查，以确保我没有两次包括任何职业，即职业id 2

状态={
用户：[{user\u id:0，user\u name:“John”，profession\u id:1，profession:“Developer”}，
{用户id:1，用户名：“鲍勃”，职业id:2，职业：“看门人”}，
{用户id:2，用户名称：“Tony”，职业id:2，职业：“看门人”}，
{用户id:3，用户名：“Steve”，职业id:3，职业：“电工”}
],
类别：[{prof_id:1，prof_name:“Developer”}，
{prof_id:2，prof_name:“看门人”}，
{教授id:3，教授姓名：“电工”}
]
}
componentDidMount（）{
this.fetchUsers（）；
}
fetchUsers=（）=>{
取（'http://localhost:9999/users')
.then（response=>response.json（））
。然后（json=>{
forEach（用户=>{
this.setState（{users:[…this.state.users，user]}）；
如果（！this.state.categories.some(
category=>category.prof_id==user.profession_id））{
让optionGroupData={
prof_id:user.profession_id，
教授姓名：user.profession\u姓名
}
这个.setState（{
类别：[…this.state.categories，optionGroupData]
});
}
});
})
.catch（error=>console.error（error））；
}
render（）{
返回(
)
}

Dropdown.js 下面是下拉组件的无状态定义。所有数据都通过下拉道具从第一个文件传递

在里面，我创建了我的select标记，在这些标记中，我首先遍历我的categories数组来呈现optgroup。对于第一个循环，它呈现optgroup，然后遍历我的用户。如果用户的profession id与optgroup id匹配，我将使用要在下拉列表中显示的数据呈现该选项

render(){
    return(
        <select>
            this.props.optionGroups.map(optionGroup => {
                return (
                    <optgroup key={optionGroup.prof_id} label={optionGroup.prof_name}>
                        {this.props.options.map(option => {
                            if(option.profession_id == optionGroup.prof_id){
                                return(
                                    <option key={option.profession_id} value={option.id}> 
                                        {option.user_name}
                                    </option>
                                )
                            }
                        })}
                    </optgroup>
                )
            }
        </select>
    )
}

render（）{
返回(
this.props.optionGroup.map（optionGroup=>{
返回(
{this.props.options.map（option=>{
if（option.profession\u id==optionGroup.prof\u id）{
返回(
{option.user_name}
)
}
})}
)
}
)
}

好的。我的React项目中有以下两个文件。第一个文件已经包含一些虚拟状态数据，例如，调用我的端点并填充我的状态，以及创建我的下拉组件的实例

在我的fetch中，我还有一些逻辑来动态创建类别组，以用于我的optgroup定义。这也是一个检查，以确保我没有两次包含任何职业，即职业id 2

状态={
用户：[{user\u id:0，user\u name:“John”，profession\u id:1，profession:“Developer”}，
{用户id:1，用户名：“鲍勃”，职业id:2，职业：“看门人”}，
{用户id:2，用户名称：“Tony”，职业id:2，职业：“看门人”}，
{用户id:3，用户名：“Steve”，职业id:3，职业：“电工”}
],
类别：[{prof_id:1，prof_name:“Developer”}，
{prof_id:2，prof_name:“看门人”}，
{教授id:3，教授姓名：“电工”}
]
}
componentDidMount（）{
this.fetchUsers（）；
}
fetchUsers=（）=>{
取（'http://localhost:9999/users')
.then（response=>response.json（））
。然后（json=>{
forEach（用户=>{
this.setState（{users:[…this.state.users，user]}）；
如果（！this.state.categories.some(
category=>category.prof_id==user.profession_id））{
让optionGroupData={
prof_id:user.profession_id，
教授姓名：user.profession\u姓名
}
这个.setState（{
类别：[…this.state.categories，optionGroupData]
});
}
});
})
.catch（error=>console.error（error））；
}
render（）{
返回(
)
}

Dropdown.js 这是无状态的def