在 React 组件中通过 onMouseEnter 设置延迟状态

Question

我有一个由一系列 Material UI 的 ListItems 组成的菜单。当鼠标进入给定项目时，我使用其中一个道具将状态提升到父组件，该组件负责确定需要显示哪个子菜单。以下是相关行：

• onMouseEnter 在每个列表项中：

onMouseEnter={event => openDropDown(event, menuItem, subMenuItem)}

• openDropDown 调用setSubMenuItem 提升状态：

  const openDropDown = (event, menuItem, subMenuItem) => {
    if (subMenuItem.subMenu) {
      setSubMenuItem({ ...subMenuItem, parent: menuItem });
      setAnchorEl(event.target.getBoundingClientRect());
    } else {
      closeDropDown();
    }
  };

但是，状态转换比鼠标移动要慢。这会导致状态“卡住”在到达目的地的路径上的第一个项目中。因此，项目 2 和 6 的子菜单分别显示在场景 A 和 B 中（而不是预期的 4 和 3）：

任何确保设置状态与鼠标移动同步的想法都将受到欢迎。我尝试在setTimeout 内调用openDropDown，但当我从一个项目移动到下一个项目时，它会导致每个子菜单都弹出。

Answer 1

我最终按照this thread 中的建议延迟了状态转换，并且工作得很好。