material-uiオートコンプリートを使用して重複を避けるにはどうすればよいですか？

Question

マテリアルUIでオートコンプリートコンポーネントを使用しているときに、[名前、都市、州...]という人物のリストをデータソースとして使用すると、オースティンが2回表示されます。 同じデータソースを使用しているときにリストに重複したデータが表示されないようにするにはどうすればよいですか？

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; }) 
), 
]; 

これには複数の方法がありますが、使い方はさまざまです。