我在使用 Shortid 或任何其他独特的 uid 生成器时遇到一些问题。我使用shortid.generate()的那一刻作为表格中的键，我的 Material UI Popover 的 anchor 被扔到其默认位置，而不是出现在按钮所在的位置。
Here's a sandbox! - 尝试删除/添加回来 shortid.generate()从第 72 行开始。
我什至尝试过uniqueId来自 lodash 并且发生了同样的事情 - 不使用按键确实会在正确的位置呈现对话框。我什至更改了 Material UI/React 的版本，但什么也没发生。
有什么想法吗？
谢谢!
编辑 - 我通常使用 item.uid作为关键，因为我总是从服务中获取项目，但如果我刚刚创建了对象，item.uid是 undefined - 到目前为止我所做的是设置 item.uid = shortid.generate() (临时 uid)当我创建对象然后离开 <TableRow key={item.uid}>照原样。但随后我必须在保存对象之前删除临时 uid。
最佳答案
您永远不应该使用随机 ID 作为键(至少不应该在渲染期间生成随机 ID)。
当您的状态发生变化时(例如，由于 handleClick)，您的表格行将全部使用新键重新呈现。这意味着所有表行都将被卸载并安装新的 DOM 元素，而不是简单的重新渲染。您状态中的 anchorEl 将指向已从 DOM 中删除的元素，因此无法确定其位置。
如果您没有与数据相关的唯一键，则只需使用索引作为键，以便它至少在渲染过程中保持稳定(只要您不添加/删除行)。另一种选择是在创建数据时而不是在渲染期间生成唯一的 id。
关于reactjs - 当在具有唯一键的表中的内联按钮上使用时，Material UI Popover 会被抛出到左上角，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56235483/