在 Outer 的 Ant 设计菜单中重置打开键时出现问题

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正在重置。当 Sider 折叠时，如何防止defaultOpenKeys被重置？

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

Answer 1

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

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

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

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