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

前端-xyq發表於2024-11-11
Promise

參考：

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.List
          name='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.List
          name='params'
          rules={[
            {
              validator: validateParams, // <==關鍵
            },
          ]}
        >
...
</Form.List>

相關文章