原因
新版的antd使用了React的hooks,表单中的字段效验方法进行了一些修改。原来的callback回调方法改成返回一个Promise对象。
<Modal
visible={visible}
title={modelTitle}
width={500}
onOk={handleOk}
okText={'保存'}
cancelText={'取消'}
confirmLoading={loading}
onCancel={() => setVisible(false)}
destroyOnClose
{...otherProps}
>
<Form
layout='horizontal'
form={form}
>
<Form.Item
name='categoryName'
initialValue={form.getFieldValue('categoryName') || formValue?.categoryName || ''}
validateTrigger='onBlur'
rules={[
{
required: true,
message: '不能为空'
},
{
min: 1,
max: 200,
message: '请输入1-200字'
},
{
whitespace: true,
message: '不能为纯空格'
},
{
async validator(rule, value, callback) {
const param = { id: formValue?.category, categoryName: value };
const res = await WorkFlowCategoryNameIsExist(param);
const { code, data: isExistName, msg } = res;
if (isSuccess(code)) {
if (isExistName) {
return Promise.reject('分组名称重复,请重新输入');
// callback('分组名称重复,请重新输入');
} else {
return Promise.resolve();
// callback();
}
} else {
return Promise.reject(msg);
// callback(msg);
}
}
}
]}
>
<Input
placeholder={'请输入分组名称'}
maxLength={200}
/>
</Form.Item>
</Form>
</Modal>