Блог

Я работаю в приложении, где мы используем компонент AsyncTypeahead из react-bootstrap-typeahead. Это работает замечательно, и мне нравится библиотека, но недавно мне было поручено автоматически выбирать верхний результат, если пользователь что-то вводит, а затем нажимает за пределами поля (так далее). Я добавил свою логику и во время тестирования заметил, что наша функция поиска вызывалась не всегда, когда я вводил тестовые данные в поле.

Прочитав документы, я нашел флаг useCache и понял, что по умолчанию для него установлено значение on, поэтому мы не всегда вызывали search . Переключение этого значения на false гарантирует, что мы вызываем наш поиск во всех случаях, и мой автоматический выбор работает без проблем (я выполняю некоторую проверку для автоматического выбора данных, которые заданы в нашей функции поиска, поэтому в этом случае два события связаны вместе).

Прежде чем я отправлю свои изменения в prod, я надеялся получить некоторую информацию о деталях того, как работает этот кеш, и когда мы решим, что кеш больше не «действителен», и необходимо выполнить новый поиск. Я в основном пытаюсь понять влияние отключения этого кэша, и я не вижу ничего конкретного в документах.

Любая помощь приветствуется!

React-bootstrap-typeahead имеет открытый исходный код, поэтому вы можете ознакомиться с исходным кодом, если хотите понять реализацию. Встроенный кэш очень прост: это просто простой объект, который добавляет пары ключ / значение, соответствующие строке запроса и результатам. Перед запуском поиска компонент проверяет объект, чтобы узнать, был ли уже отправлен текущий запрос, и если да, вернет кэшированный результат.

Ниже приведены соответствующие разделы:

 const cacheRef: { current: Cache } = useRef({});
const queryRef: { current: string } = useRef(props.defaultInputValue || '');

const handleSearch = useCallback((query: string) => {
  queryRef.current = query;

  if (useCache amp;amp; cacheRef.current[query]) {
    forceUpdate();
    return;
  }

  onSearch(query);
}, [forceUpdate, minLength, onSearch, useCache]);

useEffect(() => {
  if (!isLoading amp;amp; prevProps amp;amp; prevProps.isLoading amp;amp; useCache) {
    cacheRef.current[queryRef.current] = options;
  }
});