React Antd 表单校验报错validateFields重复报错?

作者站长头像
站长
· 阅读数 8

一个很普通的表单,动态校验了两个表单项,提交时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.React Antd 表单校验报错validateFields重复报错?

代码:


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个回答
avatar
test
2024-06-27

answer image自定义校验的数组中有两个校验规则,如果是为空,第二个校验要走成功,否则会冲突

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容