Javascript 如何使用React JS将json api中的所有值显示到单个下拉列表中？

我有一个用React JS编写的页面，包含一个下拉列表。下拉列表中的值是从具有100多个客户端的json文件填充的。 我的页面中的下拉列表向用户显示客户机，但我遇到的问题是：它在单个下拉列表中显示客户机，我的目标是将所有客户机放入一个/单个下拉列表中

这只是json文件中100个数组中的一个：

[
    {
        "id": 777,
        "abc_programid": "777777-1111-2222-333-444444",
        "clientName": "client one - AB"
    }
]

守则：

import React, { Component } from 'react';
class Acl extends Component {

   constructor(){
       super();
       this.state = {
           data: [],
       };
   } //end constructor

    componentDidMount() {
        fetch('http://myClientapi/api/', {
            method: 'GET',
            headers: {
                'Content-type': 'application/json',
                'Authorization': 'Bearer abc.123.456'
            },
        })
        .then(results => results.json())
        .then(data => this.setState({ data: data }))
    }

    render() {
    console.log(this.state.data);
    return (
    <div>
        <div className="container">
            <form>
            <h2>Memeber Selection:</h2>
            <div>
                {
                    this.state.data.map(item =>(
                        <div>
                            <select className="custom-select" id="clientName">>
                            <option key={item.clientName}>{item.clientName}</option>
                            </select>
                        </div>
                    ))
                }
            </div>
            <div>
            <button type="submit" className="btn btn-primary">Submit</button>
            </div>
            </form>
        </div> 
    </div>
        );
      }
}

export default Acl

import React，{Component}来自'React'；
类Acl扩展组件{
构造函数（）{
超级（）；
此.state={
数据：[]，
};
}//结束构造函数
componentDidMount（）{
取（'http://myClientapi/api/', {
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
“授权”：“持票人abc.123.456”
},
})
.then（results=>results.json（））
.then（data=>this.setState（{data:data}））
}
render（）{
console.log（this.state.data）；
返回(
成员选择：
{
this.state.data.map（项=>(
>
{item.clientName}
))
}
提交
);
}
}
导出默认Acl

…我的问题：我的页面显示100个下拉列表，每个下拉列表都有一个单独的客户端；我的目标是：让所有客户都进入一个下拉列表。请帮我拿一下好吗

将

移动到映射循环之外，并仅在映射回调中返回

<div>
  <select className="custom-select" id="clientName">
    { this.state.data.map(item =>(
       <option key={item.clientName}>{item.clientName}</option>
    )) }
  </select>
</div>

{this.state.data.map（项=>(
{item.clientName}
)) }

将

移动到映射循环之外，并仅在映射回调中返回

<div>
  <select className="custom-select" id="clientName">
    { this.state.data.map(item =>(
       <option key={item.clientName}>{item.clientName}</option>
    )) }
  </select>
</div>

{this.state.data.map（项=>(
{item.clientName}
)) }

{calculatorData.map（（caldata，index）=>
{caldata.name}
)}

{calculatorData.map（（caldata，index）=>
{caldata.name}
)}

谢谢。。。这解决了我遇到的问题。谢谢。。。这解决了我遇到的问题。