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

Question

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

我可以得到一些关于我做错了什么的帮助吗？

Answer 1

您将数据集缩减为具有唯一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.clientName存储v。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.clientName存储v。这将覆盖以前的值。map现在是一个内部结构像{ "Fairfax CPS-VA-02-14 - TK": arr[1] }的Map
  • 直到没有更多的元素
• 对map.values()的调用将获取每个键/值对的值，但映射中只有一个具有内部状态，如下所示：{ "Fairfax CPS-VA-02-14 - TK": arr[arr.length - 1] }
• 这些值被放入一个等效于[arr[arr.length-1]]的新数组中
• 返回的新数组只有一个值