在 Sider 内的 Ant Design 菜单中重置 openKeys 时出现问题

Question

我在可折叠 Sider 中有 antd 菜单。我已经为其中一个子菜单设置了默认打开键，它们应该一次打开一个。这是我的菜单代码：

const MainMenu = ({ defaultOpenKeys }) => {
  const [openKeys, setOpenKeys] = useState(defaultOpenKeys);
  const rootKeys = ["sub1", "sub2"];
  // Open only one submenu at a time
  const onOpenChange = props => {
    const latestOpenKey = props.find(key => openKeys.indexOf(key) === -1);
    if (rootKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(props);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : defaultOpenKeys);
    }
  };
  return (
    <Menu
      theme="dark"
      openKeys={openKeys}
      defaultSelectedKeys={["1"]}
      mode="inline"
      onOpenChange={onOpenChange}
    >
      <Menu.Item key="1">
        Option 1
      </Menu.Item>
      <SubMenu key="sub1" title="User">
        <Menu.Item key="2">Tom</Menu.Item>
      </SubMenu>
      <SubMenu key="sub2" title="Team">
        <Menu.Item key="3">Team 1</Menu.Item>
      </SubMenu>
    </Menu>
  );
};

export default MainMenu;

我defaultOpenKeys从西德经过。

const SiderDemo = () => {
  const [collapsed, setCollapsed] = useState(false);
  const toggleSider = () => {
    setCollapsed(!collapsed);
  };
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Button type="primary" onClick={toggleSider}>
        {React.createElement(
          collapsed ? MenuFoldOutlined : MenuUnfoldOutlined
        )}
      </Button>
      <Sider
        collapsible
        collapsed={collapsed}
        collapsedWidth={0}
        trigger={null}
      >
        <Menu defaultOpenKeys={["sub1"]} />
      </Sider>
      ...
    </Layout>
  );
};

它可以在安装上使用，但是当我折叠 Sider 时，defaultOpenKeys就会被重置。defaultOpenKeys当 Sider 折叠时，如何防止被重置？

我创建了一个codesandbox，并在菜单中添加了控制台日志。您可以看到defaultOpenKeys，openKeys在安装上是相同的。当我折叠 Sider 时，控制台日志被触发两次。第一次defaultOpenKeys和第一次openKeys是一样的。而第二次openKeys就变得空了。我该如何解决这个问题？

Answer 1

原因：关闭侧边栏时，它会关闭打开的侧菜单，因此它会触发带有空数组的 openchange ，因此您的逻辑将其重置为空。

这是包含更新代码的代码沙箱链接

https://codesandbox.io/s/sider-demo-0der5?file=/Menu.jsx

建议：将 props 分配给初始状态是反模式。如果父组件中的 prop 值发生更改，则永远不会显示新的 prop 值，因为初始状态永远不会更新组件的当前状态。props 的状态初始化仅在组件首次创建时运行