Reactjs 当在具有唯一键的表中的内联按钮上使用时，材质UI Popover将抛出到左上角

我在使用shortid或任何其他唯一uid生成器时遇到一些问题。当我使用

shortid.generate（）

作为表中的键时，我的

Material UI Popover

的锚点将被抛出到其默认位置，而不是出现在按钮所在的位置

-尝试从第72行删除/添加回

shortid.generate（）

我甚至从lodash尝试了

uniqueId

，但同样的情况也发生了-不使用键确实可以在正确的位置渲染对话框。我甚至更改了Material UI/React的版本，但什么也没发生

有什么想法吗

谢谢

---

EDIT-我通常使用

item.uid

作为键，因为我总是从服务中获取项目，但是如果我刚刚创建了对象，

item.uid

是

未定义的
-我现在做的是设置
item.uid=shortid.generate（）
（临时uid）当我创建对象，然后保持原样时。但是，在保存对象之前，我必须删除临时uid。
您不应该将随机ID用作键（至少不应该在渲染期间生成随机ID）

当您的状态发生变化时（例如，由于
handleClick
），您的表行都将使用新键重新呈现。这意味着将卸载所有表行并装载新的DOM元素，而不是简单的重新呈现。您所在州的
anchorEl
将指向已从DOM中删除的元素，因此无法确定其位置

如果没有与数据相关的唯一键，则只需使用索引作为键，这样它在渲染中至少是稳定的（只要不添加/删除行）。另一个选项是在创建数据时而不是在渲染过程中生成唯一ID。
“另一个选项是在创建数据时而不是在渲染过程中生成唯一ID。”-因此，在向我渲染的列表添加新对象时，这不是只读的-我只是为了react添加了一个临时uid，然后在持久化之前删除它？“您所在州的主播将指向已从DOM中删除的元素，因此无法确定其位置。”-好的，这只是使用meAs单击的，只要您在渲染之外有可靠的方法来管理它，我认为这很好。这不是一种常见的做法，因为数据中通常有一些东西可以唯一地标识每一行。如果可以以持久化的方式删除行，那么如何与后端通信应该删除哪一行？一般来说，这个问题的答案是应该使用什么作为键。在持久化一个新对象时，我通常会添加（服务器端）一些默认字段，例如
日期
，因此在React中，我通常循环一个列表，检查对象是否有
日期
字段。如果是，那么我知道
date
字段是由服务设置的，它不是一个全新的对象，所以我跳过它。当我需要一个只需按cancel键的页面时，就会发生这种情况，并且不会保留任何内容。因此，我不会单独保存每个对象，而是一次保存一个完整的列表。如果我坚持每个对象本身，我就不会有这个问题。