Reactjs 如何使用材质ui自动完成避免重复？

当在Material UI中使用autocomplete组件时，使用人员列表[姓名、城市、州…]作为数据源，Austin将显示两次。 我们如何确保列表在仍然使用相同的数据源时不会显示重复数据

const data = [
  {"id":1,"name":"bob", "city":"Austin","state":"TX"},
  {"id":2,"name":"bobb", "city":"Austin","state":"TX"},
  {"id":3,"name":"bobby", "city":"Dallas","state":"TX"},
]

const cityConfig = {
  text: 'city',
  value: 'city',
};

<AutoComplete
  floatingLabelText={'label'}
  dataSource={data}
  dataSourceConfig={cityConfig}
/>

const数据=[
{“id”：1，“name”：“bob”，“city”：“Austin”，“state”：“TX”}，
{“id”：2，“name”：“bobb”，“city”：“Austin”，“state”：“TX”}，
{“id”：3，“name”：“bobby”，“city”：“Dallas”，“state”：“TX”}，
]
常数城市配置={
文字：“城市”，
值：“城市”，
};

正如我在评论中所说，问题不在于自动完成，而是过滤数据以显示

您必须遍历当前的数据源，并按城市对其进行过滤

下面的实现使用了一个流行的函数式编程库

const data = [
  {"id":1,"name":"bob", "city":"Austin","state":"TX"},
  {"id":2,"name":"bobb", "city":"Austin","state":"TX"},
  {"id":3,"name":"bobby", "city":"Dallas","state":"TX"},
]

const cities = uniq(map((item) => {
  return item.city;
}))(data);

因此，您的数据源将变成城市

或者，如果你不想使用ramda，可以使用ES6，你也可以做其他事情。。。但这只会返回一系列城市

---

有多种方法可以做到这一点，这取决于您的使用案例。

您基本上需要一个城市列表*（无重复项）作为自动完成的数据源。因此，这与自动完成无关，而是过滤数据*编辑谢谢你，丹尼尔，ES6解决方案很有魅力！

const a = [
  ...new Set(
    data.map((person) => { return person.city; })
  ),
];