Material-ui предупреждение о дублировании автозаполнения

Я использую material-ui в проекте, и у меня возникают небольшие проблемы с компонентом AutoComplete при попытке загрузить больший список контактов, некоторые контакты могут иметь одно и то же имя (из-за тестовых данных), но разные идентификаторы.

  1. Предупреждение при передаче объекта как элемента dataSource. Я получаю предупреждение о дублировании ключа: «Предупреждение: flattenChildren (...): обнаружены два дочерних элемента с одним и тем же ключом»

    {
      contact,
      key: index,
      text: FullName,
      value: <MenuItem key={index} primaryText={item} />
    }
  1. При наборе текста рендеринг идет медленно, потому что иногда совпадает с большим количеством контактов. В идеале я бы хотел, чтобы в автозаполнении отображалось максимум 5-10 контактов, но это пока невозможно. (эта функция, кажется, уже принята в PR, или?)

Спасибо,


reactjs material-ui autocomplete
person Liviu Ignat    schedule 14.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы избавиться от предупреждения о дублировании ключа, свойство text должно быть уникальным, потому что именно оно используется для создания идентификатора React ID.

Лучше всего было бы установить в поле «текст» значение index или какой-либо идентификатор. Скажем, FullName хранятся в массиве. Затем вы можете использовать индекс, чтобы найти соответствующее имя. Если FullNames находятся в объекте / словаре, вы можете получить FullNames, используя вместо этого идентификатор.

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

person John William Domingo    schedule 15.04.2016