前端 - 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

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