我调用一个API,该API保留数据中的重复值
async fetch() {
const { user } = this.props;
try {
const res = await Data(user.token);
this.setState({ data: res });
} catch(error) {
console.log('Error: cant retrieve ata', error);
}
}
然后我对此数据设置一个过滤器
setFilteredContracts() {
const { contracts, firstFilter, secondFilter, searchBar } = this.state;
if (contracts) {
let data = contracts; //take the unfiltered data of contracts from the fetch
if(firstFilter != '') { //first filter refers to the selection of primary officer
data = data.filter(contract =>
contract.primaryOfficerInfo.id === firstFilter);
}
if(secondFilter != '') { //second filter referes to the selection of the secondary officer
data = data.filter(contract =>
contract.secondaryOfficerInfo.id === secondFilter);
}
if(searchBar != '') { //refers to the manual searching
data = data.filter(contract => {
if(contract.title.toLowerCase().includes(searchBar.toLowerCase())) {
return contract;
}
});
}
return data;
}
}
将其传递到另一个组件
const filteredContracts = this.setFilteredContracts();
<ContractsTable contracts = { filteredContracts }/>
然后最终使用地图将其渲染到我的前端
{contracts &&
contracts.map(contract => {
return (
<MenuItem
key={contract.primaryOfficerInfo.id}
value={contract.primaryOfficerInfo.id}
>
{contract.primaryOfficerInfo.firstName +
" " +
contract.primaryOfficerInfo.lastName}
</MenuItem>
);
})}
但是如果我有两个Jane Doe,它们出现在我的菜单项中,我只需要一个Jane Doe,我将如何实现?