loadOptions вызывается для той же строки, которая искалась ранее, и cacheOptions включен

Question

Я пытаюсь использовать из react-selectбиблиотека.

я включил cacheOptionsвариант.

Используя приведенные ниже шаги, я вижу проблему с

1. Поиск строки
2. Отображается список опций
3. поле ввода
4. Введите снова
5. Немедленно отображает
6. запускает API с поисковым вводом tes
7. Clearполе ввода
8. Войти same stringопять таки test
9. Немедленно отображает same list of options
10. loadOptions запускает API с поисковым вводом te.

Я не уверен, почему loadOptions срабатывает в этом сценарии, если я ввожу ту же строку поиска.

Здесь AsyncSelect

      <AsyncSelect
  classNamePrefix="select-item"
  onChange={ onOptionSelect }
  getOptionValue={ item => item.id }
  placeholder="Search by Item"
  formatOptionLabel={ company => <CompanyWithIcon Item={ Item } /> }
  loadOptions={ loadOptions }
  styles={ customStyles }
  isSearchable
  cacheOptions
  isClearable
/>

Здесь loadOptionsфункция

      const loadOptions = inputValue => searchItem(inputValue);

Кто-нибудь может помочь?

Answer 1

Я думаю, это происходит потому, что вы не используете обратный вызов или обещание для loadOptions. loadOptions должен вернуть обещание.

Справочный документ -> https://react-select.com/props#async-props говорит:

loadOptions: функция, которая возвращает обещание, представляющее собой набор параметров, которые будут использоваться после разрешения обещания.

Это должно быть, как показано ниже:

      const loadOptions = (inputValue, callback) => {
  setTimeout(() => {
    callback(searchItem(inputValue));
  }, 1000);
};