Как исправить задержку при выборе элемента, содержащего большой список опций

У меня есть приложение для реагирования, которое использует пользовательский интерфейс для реагирования, я использую пример автозаполнения react-select, который вы можете найти здесь.

https://material-ui.com/components/autocomplete/

Когда количество элементов в списке выбора велико, например около 2500 ~, он отстает и становится непригодным для использования.

Я изменил исходную демонстрацию, чтобы предложить длину 2500 для заполнения выборки.

const suggestions = [];
for (let i = 0; i < 2500; i = i + 1) {
  suggestions.push({ value: i, label: `Option ${i}` });
}

Пожалуйста, посмотрите демонстрационный пример моей проблемы ниже.

https://codesandbox.io/s/material-demo-vp59j

Когда вы нажимаете первый селектор, он очень тормозит.


reactjs material-ui react-select
person Kay    schedule 03.07.2019    source источник
comment
вы всегда можете использовать идею бесконечной прокрутки. Сначала загрузите определенное количество данных и медленно, пока пользователь прокручивает их.   -  person saurssaurav    schedule 03.07.2019
comment
Здесь есть несколько полезных советов: github.com/JedWatson/react-select/ issues / 3128   -  person Ryan Cogswell    schedule 03.07.2019

Ответы (3)


arrow_upward
6
arrow_downward

Я использовал filterOptions, чтобы показать первые 500 элементов и другие элементы, которые все еще будут сопоставлены при поиске, например.

  import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';

  const filterOptions = createFilterOptions({
    matchFrom: 'any',
    limit: 500,
  });
  
  <Autocomplete
    filterOptions={filterOptions}
  />

Дополнительные аргументы. ›› https://material-ui.com/components/autocomplete/#custom-filter

person Smatchai J Yato    schedule 05.04.2021
comment
Ох, чувак! Ты спас мне дни! Боролись с этим. Большое спасибо. - person Agent K; 21.04.2021
comment
это круто чувак - person lost_in_magento; 22.04.2021

arrow_upward
3
arrow_downward

У меня была та же проблема, что и мне пришлось создать раскрывающийся список примерно для 3000 значений. Хитрость заключается в том, чтобы показать ограниченное количество элементов в раскрывающемся списке Автозаполнение и позволить пользователям искать те, которые не могут быть найдены в раскрывающемся списке.

Используйте функцию Filteroptions для материала Ui Autocomplete, используйте параметр limit и установите для него значение 200.

Автозаполнение покажет только 200 элементов в раскрывающемся списке, а остальные можно будет найти.

person Atul Rai    schedule 13.10.2020

arrow_upward
2
arrow_downward

Для этой цели вы должны использовать react-window. https://github.com/bvaughn/react-window

Это библиотека для эффективного отображения больших списков и табличных данных.

Вот рабочая демонстрация с множеством записей, которые нужно показать. Он не отстает от https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-bbtz0

P.S: Это один из ключевых парней из команды реагирования на facebook.

person Adeel Imran    schedule 03.07.2019
comment
Мне нужно решение с текущими библиотеками, я использую материал ui и реагирую на выбор - person Kay; 03.07.2019
comment
Есть пример material-ui с реактивно-вирусализированным material-ui.com/components / lists / # virtualized-list - person Adeel Imran; 03.07.2019
comment
В этом примере действительно используется react-window, а не react-virtualized. - person Lee; 04.07.2019
comment
react-window похоже на обновленную версию react-virtualized того же автора. - person Adeel Imran; 04.07.2019
comment
@AdeelImran Но как насчет поведения в раскрывающемся списке. Это просто список и не имеет аналогичного поведения. Также что, если мы хотим, чтобы несколько элементов выбора использовали этот виртуализированный список. - person dev_khan; 09.04.2020
comment
Как говорит @dev_khan, это просто список, а не выбор: / - person Jamie Hutber; 26.08.2020