Установка значения по умолчанию для пользовательского интерфейса автозаполнения

Question

Я пытаюсь установить начальное значение автозаполнения на «ACCU-SEAL 35-532 Bag Sealer», но получаю следующую ошибку:

Material-UI: метод автозаполнения getOptionLabel вернул неопределенное значение вместо строки для «ACCU-SEAL 35-532 Bag Sealer».

, поэтому я попытался добавить следующее к своему автозаполнению:

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

, но я получаю ту же ошибку.

У меня есть пример моего кода здесь: https://codesandbox.io/s/material-demo-fv075?file= / formElementsEdit.jsx

Любая помощь в настройке начального значения автозаполнения будет очень ценной.

Answer 1

Когда вы используете в автозаполнении options, вы должны использовать те же значения, что и ваши параметры.

В ваших примерах каждый параметр - это объект с value и label. Поскольку вы используете label в функции getOptionLabel - вы должны использовать по крайней мере label в передаваемом объекте.

Опция # 1:

const value = "ACCU-SEAL 35-532 Bag Sealer";
...
<Autocomplete
    ...
    value={{label: value}}

Опция № 2:

const value = "ACCU-SEAL 35-532 Bag Sealer";
...
<Autocomplete
    ...
    value={{label: value, value: 1}}

Опция № 3: ...

В любом из приведенных выше вариантов значение свойства value должно быть объектом с хотя бы одним ключом - label ключ.

Проверьте следующий пример на основе вашего кода: https://codesandbox.io/s/material-demo-zzfh7?file= / formElementsEdit.jsx