ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
92.23k stars 49.4k forks source link

动态规则rules为空时,已校验出的错误无法被消除 #51008

Open LimMem opened 3 weeks ago

LimMem commented 3 weeks ago

Reproduction link

https://codesandbox.io/p/sandbox/antd-reproduction-template-forked-sr3vgc?workspaceId=f8c8b8be-9c36-4d85-adcf-c7766abab738

Steps to reproduce

  1. 选中昵称是否需要校验,此时会显示昵称的错误信息
  2. 取消昵称是否需要校验,此时不会取消昵称错误信息 image

What is expected?

当rules为空数组时,能正确的将错误信息去掉

What is actually happening?

当rules为空数组时,无法移除已经校验的错误信息

Environment Info
antd 4.24.16
React 17.x
System mac os
Browser chrome

经过断点排查发现这个错误来自rc-form-field/src/useForm.ts#904 当rule为空时,无法不再触发校验逻辑。 代码如下

app

目前的临时解决方案


/**
 * 空规则标识
 * gai
 */
const EMPTY_RULE_SYMBOL = Symbol('EMPTY_SYMBOL');

/**
 * 为了规避rc-form-field的校验bug
 * 具体代码可以参考rc-form-field/src/useForm.ts#904
 * @returns
 */
export const createEmptyRule = (): any => {
  return {
    [EMPTY_RULE_SYMBOL]: true,
  };
};

// 需要为空时
setRules([createEmptyRule]);
zombieJ commented 3 weeks ago

codesandbox 没有设置公开:

截屏2024-09-25 10 22 19
github-actions[bot] commented 3 weeks ago

Hello @LimMem. Please provide a online reproduction by forking this one or provide a minimal GitHub repository like create-react-app-antd. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @LimMem,我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个在线重现案例 ,或者提供一个最小化的 GitHub 仓库(类似 create-react-app-antd)。3 天内未跟进此 issue 将会被自动关闭。

什么是最小化重现,为什么这是必需的?

LimMem commented 3 weeks ago

权限已开启,可查看https://codesandbox.io/p/sandbox/antd-reproduction-template-forked-sr3vgc?workspaceId=f8c8b8be-9c36-4d85-adcf-c7766abab738 @zombieJ

afc163 commented 2 weeks ago

确实是个问题,可以来个 PR 修修看。

github-actions[bot] commented 2 weeks ago

Hello @LimMem. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, 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!

你好 @LimMem,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

Jarryxin commented 2 weeks ago

https://ant-design.antgroup.com/components/form-cn#form-demo-dynamic-rule 改成官网这种写法是否更合理,不要移除rules中的项,改变项的属性。