更改 defaultOpenKeys 值不会重新渲染 antd 菜单组件

Question

我想要什么：

我想在更改/更新defaultOpenKeys 值时打开（展开）特定菜单的子菜单。

我的尝试：

const [submenu, setSubmenu] = useState([]);
useEffect(() => {
  setSubmenu(["sub1"]);
}, []);

...

<Menu style={{ width: 256 }} defaultSelectedKeys={["4"]} defaultOpenKeys={submenu} mode="inline">
  <Menu.Item key="1">Option 1</Menu.Item>
  <Menu.Item key="2">Option 2</Menu.Item>
  <SubMenu key="sub1" title="Submenu">
    <Menu.Item key="3">Option 3</Menu.Item>
    <Menu.Item key="4">Option 4</Menu.Item>
  </SubMenu>
</Menu>;

在这里，子菜单一开始是一个空数组，但每当页面加载时，useEffect 会更新submenu 的值并设置为["sub1"]。我相信，每当状态值发生变化时，页面都应该重新渲染，所以<Menu defaultOpenKeys={['sub1']} ...> 应该像这样更新，对吧？

但是在这里，如果我首先通过<Menu defaultOpenKeys=['sub1'] ... >，那么这会按我的预期工作，但是如果我从状态传递defaultOpenKeys 值，那么这不会像我预期的那样工作（如果状态的初始值是['sub1'] 那么它也可以正常工作）。

这是代码沙箱，我在其中包含了工作和不工作的演示。

CODESANDBOX

截图如下：

更新：

@HDM91 回答后，

我尝试过使用antd提供的另一个道具openKeys，它一开始确实打开了子菜单，但无法关闭它，甚至它确实阻止了其他子菜单的打开/关闭。

<Menu
 style={{ width: 256 }}
 defaultSelectedKeys={["4"]}
 openKeys={submenu} // blocks other submenu by closing and opening
 mode="inline"
>

Answer 1

我刚刚尝试使用 openKeys 并处理 onOpenChange 以将新的 openkeys 设置为子菜单状态，这很好：

  const [submenu, setSubmenu] = useState([]);
  useEffect(() => {
    setSubmenu(["sub1"]);
  }, []);
  return (
    <Menu
      style={{ width: 256 }}
      defaultSelectedKeys={["4"]}
      defaultOpenKeys={submenu}
      openKeys={submenu}
      onOpenChange={(openKeys) => {
       setSubmenu(openKeys);
      }}
      mode="inline"
    >
      <Menu.Item key="1">Option 1</Menu.Item>
      <Menu.Item key="2">Option 2</Menu.Item>
      <SubMenu key="sub1" title="Submenu">
        <Menu.Item key="3">Option 3</Menu.Item>
        <Menu.Item key="4">Option 4</Menu.Item>
      </SubMenu>
    </Menu>
  );