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

正如我在评论中所述，问题不在于自动完成，而是过滤您要显示的数据。

您必须遍历当前的dataSource并按城市过滤它。

以下实现使用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);

因此，您的dataSource变为城市

如果您不想使用ramda并且可以使用ES6，那么您可以做其他事情......但这将只返回城市数组。

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

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

如何使用material-ui自动完成避免重复？

1 个答案: