Я использую компонент автозаполнения с немного настроенным асинхронным поведением. Разница между стандартным примером, который вы можете найти в документации, и моим, заключается в том, что он подключен к разбитому на страницы api, который отвечает новым списком на каждое отклоненное изменение inputValue.
Предположим, что уже выбран вариант, например OptionOne (может быть по умолчанию, но это не обязательно). Я нажимаю на компонент автозаполнения, чтобы выбрать что-то еще -> появляется раскрывающийся список с результатами, разбитыми на страницы (4 варианта с начала разбитого на страницы списка, например OptionOne, OptionTwo, OptionThree, OptionFour)) -> вместо выбора чего-то из списка I ' m, начиная вводить ввод, например «OptionTwo» ->, пока есть общая часть между выбранным в данный момент параметром и словом во вводе (в данном случае слово «Option») все в порядке (потому что оно все еще отображается на раскрывающийся список) -> как только входное значение будет более определенным c ("OptionT") и нет общей части с выбранным в данный момент параметром, я получаю предупреждение о недопустимом входном значении.
Material-UI: The value provided to Autocomplete is invalid.
None of the options match with {"id":1,"name":"OptionOne"}.
Конечно, я использую getOptionSelected, но по какой-то причине он работает не так, как ожидалось. Я пробовал то же самое без использования отклоненного входного значения (которое я использую для вызовов limit api), но ничего не изменилось.
const getOptionSelected = ( option: BasicOption, value: BasicOption, ): boolean => { return option.name === value.name; };
Вот мой код - я бы хотел, чтобы он работал вcodeandbox, но я не могу найти бесплатный api с разбивкой на страницы и запросами и в то же время
https://codesandbox.io/s/holy-surf-o2czl?file= / src / Container.jsx