React JS：如何将JSON API返回的所有客户数据展示在单个下拉列表？

嗨，我一眼就看出问题所在啦——你现在把整个<select>标签放在了map循环内部，导致每一条客户数据都生成了一个独立的下拉框。咱们只需要调整一下结构，把下拉框容器放在循环外面，让循环只负责生成下拉选项就可以了！

修改后的完整代码 #

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>
              {/* 把select放在循环外面，只渲染一次 */}
              <select className="custom-select" id="clientName">
                {/* 循环生成每个客户对应的option */}
                {this.state.data.map(item =>(
                  <option key={item.id} value={item.id}>
                    {item.clientName}
                  </option>
                ))}
              </select>
            </div> 
            <div> 
              <button type="submit" className="btn btn-primary">Submit</button> 
            </div> 
          </form> 
        </div> 
      </div> 
    ); 
  } 
} 

export default Acl 

关键修改说明 #

• 调整结构：将<select>组件移到map循环外部，确保整个下拉列表只渲染一次，而不是每条数据生成一个下拉框
• 优化key值：把key从item.clientName改成item.id，因为id是唯一标识，能避免因客户名称重复导致的React警告
• 修复标签错误：修正了原代码中<select>标签多写的一个>符号
• 添加value属性：给<option>加上value={item.id}，这样提交表单时能获取到对应的客户ID，比只传名称更实用

内容的提问来源于stack exchange，提问作者user1724708