antD——Warning: `callback` is deprecated. Please return a promise instead.

参考：

1. https://blog.csdn.net/huochai770880/article/details/125925665

 

我的情况

antD表单校验，代码未报错，但提交时控制台报错：Warning: `callback` is deprecated. Please return a promise instead.

 

原报错代码：

 const validateParams = useCallback((_: RuleObject, value: ItemValueType[], callback: (error?: string) => void) => {const ipArr: string[] = value.map(item => item.ipAddr)if (ipArr.length > new Set(ipArr).size) {callback('IP重复，请检查!')} else {callback()}},[],)...<Form.Listname='params'rules={[{validator: (rule, value, callback) => {validateParams(rule, value, callback)},},]}>...
</Form.list>

 

原因

新版的Antd使用了React的hooks，表单中的字段校验方法进行了一些修改，原来的回调方法改成了返回一个Promise对象。

 

解决方法

使用Promise

第一次改后的代码：

const validateParams = useCallback((_: RuleObject, value: ItemValueType[], _callback: (error?: string) => void) => {const ipArr: string[] = value.map(item => item.ipAddr)if (ipArr.length > new Set(ipArr).size) {return Promise.reject(new Error('IP重复，请检查!')) // 改动处}return Promise.resolve() // 改动处},[],)

发现控制台仍在报错，且会进入Error页面。

 

解决方法

<Form.Listname='params'rules={[{validator: validateParams, // <==关键
            },]}>
...
</Form.List>