时间戳

首页 > 解决方案 > 当在具有唯一键的表中的内联按钮上使用时，Material UI Popover 被抛出到左上角

reactjs - 当在具有唯一键的表中的内联按钮上使用时，Material UI Popover 被抛出到左上角

问题描述

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

这是一个沙盒！- 尝试shortid.generate()从第 72 行删除/添加回来。

我什uniqueId至从 lodash 尝试过，同样的事情发生了——虽然不使用键确实会在正确的位置呈现对话框。我什至更改了 Material UI/React 的版本，但什么也没发生。

有任何想法吗？

谢谢！

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

标签： reactjsmaterial-ui

解决方案

您永远不应该使用随机 id 作为键（至少不是在 render 期间生成的随机 id ）。

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

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

推荐阅读