ReactJS - 如何使用fetch消耗json文件时防止显示重复数据

Question

我的反应页面包含三个下拉列表，每个下拉列表都有自己的相应数据集，这些数据是从json文件中提取的。我的问题是，其中一个下拉列表多次重复客户端的名称（客户端名称在下拉列表中出现的次数多一次）。有没有办法阻止客户端的名称重复？

这是我的代码：

import React, { Component } from 'react';


class Ast extends Component {

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

   change = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    });
}; //end change

    removeDuplicates(arr) {
 let data = arr.filter(function(elem, index, self) {
    return index == self.indexOf(elem);
 });
 return unique_array
}

   componentWillMount() {
    fetch('https://api.myjson.com/bins/b1i6q', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json',
        },
        /*body: JSON.stringify({
            username: '{userName}',
            password: '{password}'
        })*/
    }) /*end fetch */
    .then(results => results.json()) 
    .then(data => this.setState({ data: data })   
)

} //end life cycle

    render() {
        console.log(this.state.data);
        return (
            <div>

                <div className="container">
                    <div>
                        <form>
                            <div>
                                <h2>Memeber Selection:</h2>

                                    {['clientName', 'siteName', 'segmentName'].map(key => (
                                        <div className="dropdown-padding">
                                        <select key={key}  className="custom-select">
                                        {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
                                        </select> 
                                        </div>
                                    ))}

                            </div>

                            <div className="txt_cfm">
                                        <label for="example-text-input">Modify CFM Rate Factor:</label>
                                        <input class="form-control" type="textbox"  id="cfmRateFactor" name="cfmRateFactor" value={this.state.cfmRateFactor} onChange={e => this.change(e) } />
                                    </div>
                                    <div>
                                    <div>
                                            <button type="submit" className="btn btn-primary">Submit</button>
                                        </div> 
                                </div>

                            </form>
                    </div>
                </div>

            </div>


        );
      }
}

export default Ast