使用 Material UI 中的自动完成组件过滤唯一选项值

Question

我希望 Material UI 中的 Autocomplete 仅在下拉列表中列出对象列表中对象属性的唯一选项值。

在下面的示例中，下拉列表呈现一个包含值 ['Color1', 'Color2', 'Color1', 'Color2'] 的列表，但我希望它只呈现唯一值，例如 ['Color1', 'Color2']。

这是对象列表：

options = [
    {
        id: 1,
        name: 'Name1',
        color: 'Color1'
    },
    {
        id: 1,
        name: 'Name2',
        color: 'Color2'
    },
    {
        id: 1,
        name: 'Name3',
        color: 'Color1'
    },
    {
        id: 1,
        name: 'Name4',
        color: 'Color2'
    },
]

这是Autocomplete的完整组件：

<Autocomplete
    freeSolo
    value={initialTasting}
    options={options}
    getOptionLabel={option => option.color}
    filterOptions={(options, state) => options}
    onChange={(e, value) => {setFieldValue('color', value.color)}}
    renderInput={params => (
        <TextField
            {...params}
            label={'Color'}
            variant='outlined'
            margin='dense'
            fullWidth
        />
    )}
/>

我把剩下的代码省略了，因为它太长了。它使用 Formik、Yup、有子组件等等。

---

我想我可以使用道具filterOptions 实现我想要的结果，但是，我做不到。我对 JavaScript 太陌生了..！

提前致谢。

Answer 1

你觉得像这样更新你的选项数组怎么样？..

function getUniqueListBy(arr, key) {
    return [...new Map(arr.map(item => [item[key], item])).values()]
}

const optionsUnique = getUniqueListBy(options, 'color');

...然后将optionsUnique从<Autocomplete />组件传递给options参数