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

Question

一个很普通的表单，动态校验了两个表单项，提交时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>

Answer 1

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