如何使用材料 UI 自动完成功能避免重复

Question

当在 Material-UI 中使用自动完成组件时，使用人员列表 [姓名、城市、州...] 作为数据源，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}
/>

Answer 1

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

您必须循环访问当前数据源并按城市对其进行筛选。

以下实现使用 ramda，一个流行的函数式编程库。

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，您可以做其他事情......但这只会返回城市阵列。

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

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