Пользовательский интерфейс материала Popover бросается в верхний левый угол при использовании встроенной кнопки в таблице с уникальным ключом - PullRequest
Новая
       4

Пользовательский интерфейс материала Popover бросается в верхний левый угол при использовании встроенной кнопки в таблице с уникальным ключом

1 голос
/ 21 мая 2019

У меня возникают некоторые проблемы при использовании Shorttid или любого другого уникального генератора UID.В тот момент, когда я использую shortid.generate() в качестве ключа в таблице, точка привязки моего Material UI Popover сбрасывается в положение по умолчанию, а не отображается там, где находится кнопка.

Вот песочница! - попробуйте удалить / добавить обратно shortid.generate() из строки 72.

Я даже попытался uniqueId из lodash, и то же самое происходит - не с помощью ключа отображает диалог направильное место, хотяЯ даже изменил версии Material UI / React, и ничего не произошло.

Есть идеи?

Спасибо!

РЕДАКТИРОВАТЬ - Я обычно использую item.uid в качестве ключа, поскольку я всегда выбираю элементы из службы, но если я только что создал объект, item.uidundefined - то, что я делал до сих пор, было установить item.uid = shortid.generate() (временный идентификатор пользователя), когда я создаю объект, а затем просто оставляю <TableRow key={item.uid}> как есть.Но затем я должен удалить временный идентификатор перед сохранением объекта.

1 Ответ

1 голос
/ 21 мая 2019

Никогда не следует использовать случайные идентификаторы в качестве ключей (по крайней мере, случайные идентификаторы, генерируемые во время рендеринга ).

Когда ваше состояние изменяется (например, из-за handleClick), все строки таблицы будут перерисованы с новыми ключами. Это означает, что вместо простого повторного рендеринга все строки таблицы будут размонтированы, а новые элементы DOM подключены. anchorEl в вашем состоянии будет указывать на элемент, который был удален из DOM, поэтому его положение не может быть определено.

Если у вас нет уникальных ключей, связанных с вашими данными, просто используйте индекс в качестве ключа, чтобы он был как минимум стабилен при рендеринге (если вы не добавляете / удаляете строки). Другой вариант - генерировать уникальные идентификаторы при создании данных, а не во время рендеринга.

...