Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🧐[问题]ModalForm 关闭时 onOpenChange 触发2次 open 都是fasle #7545

Closed
YuShai opened this issue Aug 17, 2023 · 8 comments · Fixed by #8311
Closed

🧐[问题]ModalForm 关闭时 onOpenChange 触发2次 open 都是fasle #7545

YuShai opened this issue Aug 17, 2023 · 8 comments · Fixed by #8311

Comments

@YuShai
Copy link

YuShai commented Aug 17, 2023

🧐 问题描述

ModalForm onOpenChange function在关闭时候被触发2次,打开的时候触发1次,关闭时触发2次的open都是false。求解惑

💻 示例代码

 <ModalForm
                open={open}
                title={'测试'}
                form={form}
                autoFocusFirstInput
                width={500}
                onOpenChange={(open) => {
                    console.log('open', open);//关闭时候2次都是false
                    setOpen(false)
                }}
                modalProps={{ destroyOnClose: true, forceRender: false, }}
                submitter={{
                    render: (props, defaultDoms) => {
                        return [
                            <Button key="extra-reset" onClick={() => {
                                props.reset();
                            }}  >  重置 </Button>,
                            ...defaultDoms,
                        ];
                    },
                }}
                onFinish={async (values) => {
                    return true;
                }}
                autoComplete="off"
            >
            </ModalForm>
@liujiayii
Copy link
Contributor

@chenshuai2144 应该是onFinish触发了一次 setOpen(false)又触发了一次,

@chenshuai2144
Copy link
Contributor

搞个 pr 吧,做个判断。而且没不影响。

@github-actions
Copy link

Hello @YuShai. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @YuShai,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

@YuShai
Copy link
Author

YuShai commented Sep 20, 2023

搞个公关吧,做个判断。而且没影响。

试了,还是存在一点影响的,我没有去使用onOpenChange

@YuShai
Copy link
Author

YuShai commented Sep 20, 2023

@chenshuai2144应该是onFinish触发了一次setOpen(false)又触发了一次,

onFinish我没有去return true;
取消了使用onOpenChange
使用了onCancel,就正常了

@chenshuai2144
Copy link
Contributor

绕开了 也不是啥好办法

@HaceraI
Copy link

HaceraI commented Nov 28, 2023

今天在查询Redux Actions时偶然发现了onOpenChange为false时会触发两次Action,起初以为是代码哪块重复调用了,仔细检查确实没有重复调用; 研究发现是组件本身在trigger={undefined}回传了两次 onOpenChange(false):
image

https://github.com/ant-design/pro-components/blob/master/packages/form/src/layouts/ModalForm/index.tsx#L97-L250
对于为何在传入trigger时,onOpenChange 即会恢复正常,本人功力尚浅,百思不得其解,盲猜涉及到了状态更新机制

我觉得最简单的修复方法就是修改 afterClose: open && setOpen(false);

@Icesource
Copy link

我也遇到了相似的问题,但是为什么在我的 Case 中表现是 open 为 true 时触发两次,为false时触发1次,求大佬们解惑

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants