当在具有唯一键的表中的内联按钮上使用时，“材料UI弹出框”被投到左上角

Question

使用shortid或任何其他唯一的uid生成器时遇到一些问题。当我在表中使用shortid.generate()作为键时，我的Material UI Popover的定位点被抛到默认位置，而不是出现在按钮所在的位置。

Here's a sandbox!-尝试从第72行中删除/添加回shortid.generate()。

我什至从lodash尝试了uniqueId，并且发生了相同的事情-不使用键确实将对话框显示在正确的位置。我什至更改了Material UI / React的版本，什么也没发生。

有什么想法吗？

谢谢！

编辑-我通常使用item.uid作为键，因为我总是从服务中获取项目，但是如果我刚创建对象，则item.uid是undefined -到目前为止，我做的是在创建对象时设置item.uid = shortid.generate()（一个临时uid），然后将<TableRow key={item.uid}>保持原样。但是然后我必须在保存对象之前删除临时uid。

Answer 1

请勿使用随机ID作为键（至少不要在渲染期间生成的随机ID ）。

状态更改时（例如由于handleClick），您的表行将全部使用新键重新呈现。这意味着将代替所有简单的重新渲染，而是卸载所有表行并安装新的DOM元素。您所在状态的anchorEl将指向已从DOM中删除的元素，因此无法确定其位置。

如果您没有与数据相关的唯一键，则只需使用索引作为键，这样它就至少可以在所有渲染中保持稳定（只要您不添加/删除行）。另一种选择是在创建数据时而不是在渲染过程中生成唯一ID。