Arco Design抽屉关闭后怎么自动销毁组件？

柯依🍀 提问于 2026-02-26 08:41:21 阅读 41

组件

我用 Arco 的 Drawer 组件弹出一个表单，但发现即使关闭了抽屉，里面的组件实例还在内存里，数据也没重置。试过设置 unmountOnClose 为 true，但好像没生效？

这是我的用法：

const [visible, setVisible] = useState(false);

return (
  <>
    <Button onClick={() => setVisible(true)}>打开</Button>
    <Drawer
      visible={visible}
      unmountOnClose={true}
      onClose={() => setVisible(false)}
    >
      <MyFormComponent />
    </Drawer>
  </>
);

是不是哪里写错了？为啥关闭后 MyFormComponent 还没被卸载？

Drawer抽屉

我来解答赞 8 收藏

反馈

2 条解答

宇文夏沫 Lv1

哈，这个问题我当时也卡在这折腾了好久。Arco Design的Drawer组件有个坑点：unmountOnClose确实可以销毁组件，但前提是你的抽屉关闭动画要完全执行完。

我后来发现这样改就能解决：

const [visible, setVisible] = useState(false);



return (

  <>

    

    
      visible={visible}

      unmountOnClose={true}

      onClose={() => setVisible(false)}

      afterClose={() => setVisible(false)} // 关键在这行

    >

      

    

  

);

原因在于：默认情况下关闭动画过程中组件还没真正销毁，加上afterClose这个回调确保动画结束后才销毁。你也可以在onClose里加个setTimeout延迟触发状态更新，但用afterClose更优雅。

另外如果表单里有数据要重置，建议在afterClose里也处理下，比如：

afterClose={() => {

  setVisible(false);

  form.resetFields(); // 如果你的表单需要重置

}}

这坑踩得我那天差点怀疑人生，后来看源码才搞明白这机制...

2026-03-07 08:13

书生シ治博 Lv1

试试看把 unmountOnClose 改成 destroyOnClose，Arco Drawer 的属性名是 destroyOnClose 不是 unmountOnClose，后者是 Ant Design 的写法，Arco 用的是 destroyOnClose。

<Drawer

  visible={visible}

  destroyOnClose={true}

  onClose={() => setVisible(false)}

>

  <MyFormComponent />

</Drawer>

2026-02-26 09:02