使用 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 /> 组件

的选项参数

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

Filter unique option values with Autocomplete component from Material UI

javascript

autocomplete

material-ui