MUI 选择下拉菜单变得不可见，但不会消失或失去焦点

Question

我正在使用 MUI Select，代码如下：

<FormControl required fullWidth size="small">
  <InputLabel id={`${elementName}-label`}>{elementLabel}</InputLabel>
  <Select
    labelId={`${elementName}-label`}
    id={`${elementName}`}
    name={`${elementName}`}
    value={elementValue}
    label={elementLabel}
    onChange={(e) => changeHandler(e, setForm)}
  >
    {elementArrayOptions.map(option => <MenuItem value={option} key={option}>{option}</MenuItem>)}
  </Select>
</FormControl>

这是changeHandler的代码：

const handleResultsSelect = (e, setForm) => {
  setForm(e.target.value)
}

问题是“选择”在使用前三四次时可以工作，但在第四次左右时，下拉菜单变得不可见，但下拉菜单并没有消失 - 每当我将鼠标悬停在放置菜单所在的位置，当我单击时，将选择新项目，并且视图会更新。最大的不便之处在于，发生这种情况时，没有按钮、复选标记或任何其他输入可单击，这意味着视图基本上冻结，并且下拉菜单保持不可见，但无限期地向下。

这个问题有解决办法吗？

Answer 1

我通过添加一个布尔状态变量来解决这个问题，该变量确定菜单是否应该显示：

const [openResultsMenu, setOpenResultsMenu] = useState(false)

<FormControl required fullWidth size="small">
  <InputLabel id={`${elementName}-label`}>{elementLabel}</InputLabel>
  <Select
    labelId={`${elementName}-label`}
    id={`${elementName}`}
    name={`${elementName}`}
    value={elementValue}
    label={elementLabel}
    onClick={() => setOpenResultsMenu(true)}
    onChange={(e) => changeHandler(e, setForm)}
    MenuProps={{ open: openResultsMenu }}
  >
    {elementArrayOptions.map(option => <MenuItem value={option} key={option}>{option}</MenuItem>)}
  </Select>
</FormControl>

const handleResultsSelect = (e, setForm) => {
  setForm(e.target.value)
}

useEffect(() => {
  setOpenResultsMenu(false)
}, [resultsName])

如果其他人能找到一种不那么老套的方法，我会喜欢这种方法，但这绝对有效。

Answer 2

我终于明白为什么这件事发生在我身上了。 我的情况的根本原因是存在无限循环，导致 JS 堆膨胀。 这个循环的副作用是像关闭 MUI 选择元素这样的 js 操作会被排队并在长时间延迟后执行。

我定位无限循环的方法是使用chrome中的性能开发工具。 我重现了不可见的下拉列表，然后记录了大约 30-60 秒的应用程序性能。这就是图表的样子。 我的应用程序性能的屏幕截图。