观察到这个错误：Material-UI：提供给组件的 `anchorEl` 属性无效答案

【问题标题】：Observed this Error: Material-UI: The `anchorEl` prop provided to the component is invalid观察到这个错误：Material-UI：提供给组件的 `anchorEl` 属性无效
【发布时间】：2020-11-02 19:04:41
【问题描述】：

尝试在网格表中打开弹出器时观察到错误。错误详情

Material-UI：提供给组件的 anchorEl 属性无效。锚元素应该是文档布局的一部分。确保该元素存在于文档中或不显示任何元素。

以下是我在网格表中使用的示例代码：

<>
    <MoreVertIcon
    ref={anchorRef}
    aria-controls={open ? 'menu-list-grow' : undefined}
    aria-haspopup="true"
 // key={uuidv4()}
    onClick={handleToggle}
    style={{ color: theme.palette.primary.main }}
    />
    <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
        hello world
    </Popper>
</>

找到了reference，但不确定我在哪里打破了这个规范。任何帮助表示赞赏。

【问题讨论】：

请在code sandbox 中重现您的问题，然后在您的问题中显示重现问题所需的完整代码（以及沙盒链接）。原因很可能在于您未显示的代码，这使得其他人难以提供帮助。

标签： reactjs material-ui react-material

【解决方案1】：

终于找到了原因，子组件重新渲染，因为我在地图迭代中添加了动态键，这导致道具发生变化，因为我使用迭代索引作为关键问题解决了。

【讨论】：

【解决方案2】：

在我的情况下，问题是由于我的按钮IconButton 没有收到实际的ref={anchorRef}。是的，这个愚蠢的问题......

另外，就我而言，我可以使用名称键而不是索引，例如：

{optionsArray.map(option => (
     <MenuItem key={option} onClick={handleClose}>
          {option}
     </MenuItem>
))}

【讨论】：