这不是一个bug，而是一个特性，16.3.0之后的react。将渲染两倍于开发模式。请参见下面的react repo问题，快乐编码，你做得很好！
https://github.com/facebook/react/issues/15074

SCSS中存在问题。菜单打开和关闭已修复，现在您可以检查

https://codesandbox.io/s/eager-microservice-b7p4gc?file=/src/menu/menu.scss

我检查了代码，不是渲染导致它打开和关闭，而是.collapse类动画
您可以使用引用来验证案例
//样式修改.hidden {可见性：隐藏！重要}

let isSelectedOnce = React.useRef(false);

  const handleDropDown = (id) => {
    setItemPressed(id);
    if (itemPressed !== id) {
      setOpen(true);
    } else {
      setOpen((pre) => !pre);
    }
    if (!isSelectedOnce.current) {
      isSelectedOnce.current = true;
    }
  };

  return (
    ...
     <ul
        className={`collapse ${
          open && itemPressed === "menu" ? "show" : ""
        }  ${!isSelectedOnce.current ? "hidden" : ""}`}
      >
        <li>Menu Category</li>
        <li>products list</li>
        <li>Add product</li>
      </ul>
     </li>

我认为您需要在开始时保持菜单项折叠
希望这能帮助你找到更好的解决方案