Skip to content

[Dialog, Drawer] 添加 ref 会导致 Maximum update depth exceeded #3796

@javionlog

Description

@javionlog

tdesign-react 版本

1.14.2

重现链接

https://codesandbox.io/p/devbox/romantic-water-794rw8

重现步骤

import { useRef, useState } from "react";
import { Button, Dialog, Drawer, Space } from "tdesign-react";
import "./App.css";

function App() {
  const [dialogVisible, setDialogVisible] = useState(false);
  const [drawerVisible, setDrawerVisible] = useState(false);
  const dialogRef = useRef(null);
  const drawerRef = useRef(null);
  return (
    <>
      <Space>
        <Button onClick={() => setDialogVisible(true)}>打开弹窗</Button>
        <Button onClick={() => setDrawerVisible(true)}>打开抽屉</Button>
      </Space>
      <Dialog
        /* 添加 ref,会导致 Maximum update depth exceeded */
        ref={dialogRef}
        visible={dialogVisible}
        onCloseBtnClick={() => setDialogVisible(false)}
      >
        <h1>弹窗</h1>
      </Dialog>
      <Drawer
        ref={drawerRef}
        visible={drawerVisible}
        onClose={() => setDrawerVisible(false)}
      >
        <h1>抽屉</h1>
      </Drawer>
    </>
  );
}

export default App;

期望结果

添加 ref 不触发 Maximum update depth exceeded

实际结果

添加 ref 触发 Maximum update depth exceeded

框架版本

React(19.0.0)

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    已发布

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions