React Antd 表单校验报错validateFields重复报错?
一个很普通的表单,动态校验了两个表单项,提交时newForm.validateFields()。结果出现重复的报错提示,控制台也报错key重复。
控制台报错信息:Warning: Encountered two children with the same key, 请输入用户邮箱
. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
代码:
const handleOk = () => {
newForm
.validateFields()
.then(async (values) => {
//省略
<Modal
title="弹窗标题"
open={open}
onOk={handleOk}
okText="新增"
cancelText="取消"
confirmLoading={confirmLoading}
onCancel={handleCancel}
style={{ width: "50%" }}>
<Form
{...formItemLayout}
layout={formLayout}
form={newForm}
disabled={disabledNewForm}
autoComplete="off">
<Form.Item
label="用户手机号"
name="phoneNumber"
rules={[
{
required: true,
},
() => ({
validator(_, value) {
if(value && phone.test(value)) {
return Promise.resolve();
}
if(!value){
return Promise.reject(new Error("请输入用户手机号"));
}
return Promise.reject(new Error("请输入正确格式的手机号"));
},
}),
]}>
<Input allowClear placeholder="请输入用户手机号" maxLength="11" />
</Form.Item>
//剩余代码省略
</Form>
回复
1个回答
test
2024-06-27
自定义校验的数组中有两个校验规则,如果是为空,第二个校验要走成功,否则会冲突
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容