pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

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

Open YuShai opened this issue 1 year ago • 8 comments

🧐 问题描述

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>

YuShai avatar Aug 17 '23 13:08 YuShai

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

liujiayii avatar Sep 18 '23 04:09 liujiayii

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

chenshuai2144 avatar Sep 18 '23 09:09 chenshuai2144

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

github-actions[bot] avatar Sep 18 '23 09:09 github-actions[bot]

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

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

YuShai avatar Sep 20 '23 02:09 YuShai

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

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

YuShai avatar Sep 20 '23 02:09 YuShai

绕开了 也不是啥好办法

chenshuai2144 avatar Sep 23 '23 19:09 chenshuai2144

今天在查询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);

HaceraI avatar Nov 28 '23 10:11 HaceraI

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

Icesource avatar Feb 05 '24 06:02 Icesource