Material-UI自动完成警告:使用"getOptionSelected"道具自定义相等性测试 [英] Material-UI Autocomplete warning: use the `getOptionSelected` prop to customize the equality test

问题描述

我正在使用自动完成文本字段的多个值以及动态创建的选项.问题是我总是收到错误所有选项都不匹配 [" prova1"，"prova2"，"prova3"] .您可以使用 getOptionSelected 道具以自定义相等性测试".我想念的是什么?

I'm using the autocomplete textfield multiple values with options dynamically created. The problem is that I always get the error "None of the options match with ["prova1","prova2","prova3"] You can use the getOptionSelected prop to customize the equality test". What I am missing?

这是代码:

const top100Films = [ 'prova1','prova2','prova3' ];

const [tags, setTags] = useState([top100Films[0], top100Films[1]]);

<Autocomplete
        multiple
        id="tags-outlined"
        noOptionsText={'Nessuna opzione'}
        options={top100Films}
        onChange={(event, value) => setTags(value)}
        getOptionSelected={(option, value) => option === value.value}
        getOptionLabel={(option) => option}
        defaultValue={[top100Films[0], top100Films[1]]}
        filterOptions={(options, params) => {
          const opt = options.filter(r => tags.filter(x => x === r ).length === 0)
          const filtered = filter(opt, params);
          // Suggest the creation of a new value
          if (params.inputValue !== '' && tags.filter(x => x === params.inputValue).length === 0) {
            filtered.push(params.inputValue)
          }
          return filtered
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Tag"
            placeholder="Inserisci tag"
          />
        )}
      /> 

推荐答案

getOptionSelected 接受带有2个参数的回调.两者都具有选项类型.因为您正在将此选项传递给自动完成

getOptionSelected accepts a callback with 2 parameters. Both of which have the option type. Because you're passing this options to your Autocomplete

const top100Films = [ 'prova1','prova2','prova3' ];

选项类型为 string .这意味着 option 和 value 参数是 string ，因此将您的 getOptionSelected 更改为:

The option type is string. This means option and value params are string so change your getOptionSelected to:

getOptionSelected={(option, value) => option === value}

这篇关于Material-UI自动完成警告:使用"getOptionSelected"道具自定义相等性测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！