Question

我正在使用带有动态创建选项的自动完成文本字段多个值。问题是我总是收到错误消息“没有任何选项与 ["prova1","prova2","prova3"] 匹配，您可以使用 getOptionSelected 道具自定义相等测试”。我缺少什么？

代码如下：

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"
          />
        )}
      />

Answer 1

getOptionSelected 接受带有 2 个参数的回调。两者都有选项类型。因为您将此选项传递给您的 Autocomplete

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

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

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

Material-UI 自动完成警告：使用 `getOptionSelected` 道具自定义相等测试

1 个答案: