json - ReactJS - 为什么删除数组重复项的功能会导致下拉列表出现故障

问题描述

我有一个用 React JS 编写的页面，它用数据填充三个下拉列表；数据是从 json 文件中提取的。一个下拉菜单显示客户的名称，另一个显示建筑工地名称，最后一个显示分段名称。

客户端和细分下拉列表显示重复数据，因此我实现了一个功能来解决该问题。但是，当存在其他建筑物名称时，显示建筑物列表名称的建筑物地点名称下拉列表现在仅显示一个建筑物名称（实际上是 json 文件中的最后一个建筑物名称）。

卡住的是，为什么建筑工地名称会受到影响，我只需要从其他两个下拉列表中删除重复项。

示例 json 文件/数组： https ://api.myjson.com/bins/file

这是代码：

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) {
    const map = new Map();
    arr.forEach(v => map.set(v.clientName, v)) 
    return [...map.values()];
  }

   componentDidMount() {
    fetch('https://api.myjson.com/bins/16pjuq', {
        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: this.removeDuplicates(data) }));   


}//end life cycle

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

                <div className="container">
                    <div className="astContainer">
                        <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

关于我做错了什么，我能得到一些帮助吗？

标签： jsonreactjsapi

解决方案

您正在将数据集缩减为具有唯一clientName. 根据您上面的数据集，两者都有"clientName": "Fairfax CPS-VA-02-14 - TK"，所以您只保留最后一个。

编辑：在下面的评论之后，也许这将有助于解释为什么只有建筑物名称。这是我阅读removeDuplicates正在做的事情的方式：

arr论点是这样的：

[
    {
        "siteName": "Alan Leis Instructional Center",
        "clientName": "Fairfax CPS-VA-02-14 - TK",
        "segmentName": "Daniels Run ES New Chiller 4-7-2017-04-30-2018~25313~Daniels Run ES RTU Area Calibration~37851~Mod",
    },
    {
        "siteName": "Aldrin Elementary School",
        "clientName": "Fairfax CPS-VA-02-14 - TK",
        "segmentName": "Daniels Run ES New Chiller 4-7-2017-04-30-2018~25313~Daniels Run ES Calibration~52310~Mod",
    }
]

map分配给一个new Map

该forEach方法被调用arr

v被指定为第一个元素arr

{
    "siteName": "Alan Leis Instructional Center",
    "clientName": "Fairfax CPS-VA-02-14 - TK",
    "segmentName": "Daniels Run ES New Chiller 4-7-2017-04-30-2018~253 13~Daniels Run ES RTU Area Calibration~37851~Mod",
},

map.set被调用v与 key一起存储v.clientName。现在map是一个Map具有内部结构的{ "Fairfax CPS-VA-02-14 - TK": arr[0] }

在下一次迭代中： v是第一个元素arr

{
    "siteName": "Aldrin Elementary School",
    "clientName": "Fairfax CPS-VA-02-14 - TK",
    "segmentName": "Daniels Run ES New Chiller 4-7-2017-04-30-2018~25313~Daniels Run ES Calibration~52310~Mod",
}

map.set被调用v与 key一起存储v.clientName。这会覆盖先前的值。现在map是一个Map具有内部结构的{ "Fairfax CPS-VA-02-14 - TK": arr[1] }
直到没有更多元素

调用map.values()将获取每个键/值对的值，但映射中只有一个具有内部状态，例如：{ "Fairfax CPS-VA-02-14 - TK": arr[arr.length - 1] }
将值放入一个新数组中，该数组等效于[arr[arr.length-1]]
新数组只返回一个值

json - ReactJS - 为什么删除数组重复项的功能会导致下拉列表出现故障

问题描述

解决方案

推荐阅读