带有选项的 Reactjs 动态 optgroup

Question

我试图映射一个数组并创建一个 select 与 optgroups 然后它的选择。但是下面的代码只会输出 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>

关于如何获得选项输出的任何想法？

Answer 1

您的内部 map() 函数没有返回任何对象。在 <option> 元素之前添加 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>

Answer 2

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

在我的抓取中，我也有一些动态创建类别组的逻辑，用于我的 optgroup 定义。也是一项检查，以确保我没有两次包含任何职业，即 profession_id #2.

state = {
    users: [{user_id: 0, user_name:"John", profession_id: 1, profession:"Developer"},
            {user_id: 1, user_name:"Bob", profession_id: 2, profession:"Janitor"},
            {user_id: 2, user_name:"Tony", profession_id: 2, profession:"Janitor"},
            {user_id: 3, user_name:"Steve", profession_id: 3, profession:"Electrician"}
    ],
    categories: [{prof_id: 1, prof_name:"Developer"},
                 {prof_id: 2, prof_name:"Janitor"},
                 {prof_id: 3, prof_name:"Electrician"}
    ]
}

componentDidMount(){
    this.fetchUsers();
}

fetchUsers = () => {
    fetch('http://localhost:9999/users')
    .then(response => response.json())
    .then(json => {
        json.forEach(user => {
            this.setState({ users: [...this.state.users, user] });

            if (!this.state.categories.some(
            category => category.prof_id == user.profession_id)) {
                let optionGroupData = {
                    prof_id: user.profession_id,
                    prof_name: user.profession_name
                }
                this.setState({ 
                    categories: [...this.state.categories, optionGroupData] 
                });
            }
        });
    })
    .catch(error => console.error(error));
}

render(){
    return(
        <Dropdown options={this.state.users} optionGroups={this.state.categories}/>
    )
}

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

我在里面创建了我的 select 标签，在其中我首先遍历我的类别数组以呈现 optgroup。对于第一个循环，它呈现 optgroup，然后遍历我的用户。如果用户的职业 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>
    )
}

带有选项的 Reactjs 动态 optgroup

Reactjs dynamic optgroup with options

javascript

select

optgroup

reactjs