Question

我有一个用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

...我的问题：我的页面显示100个下拉列表，每个下载都有一个单独的客户端;我的目标：让所有客户进入一个单一的下拉列表。我能得到一些帮助吗？

Answer 1

将<select>移到映射循环之外，仅在地图回调中返回<option>

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

Answer 2

class PressureCollectionViewCell: UICollectionViewCell {

    var item: String? {
        didSet {
            self.label.text = item
        }
    }

    private lazy var label: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupViews()
    }

    required init?(coder: NSCoder) {
        fatalError()
    }

    private func setupViews() {
        self.addSubview(self.label)
        NSLayoutConstraint.activate([
            self.label.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            self.label.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            self.label.topAnchor.constraint(equalTo: self.topAnchor),
            self.label.bottomAnchor.constraint(equalTo: self.bottomAnchor)
        ])
    }
}

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

2 个答案: