antd自定义表单验证使用debounce请求接口无法反馈到表单下面,各位大佬有什么解决方法吗?

作者站长头像
站长
· 阅读数 9

题目描述

使用antd的自定义表单验证来请求后端接口查看是否字段重复,但是又不能太过频繁的请求,所以使用debounce,但是这样debounce会拿不到执行完的函数返回值,所以导致自定义表单验证的错误反馈不到输入框下面,各位大佬有什么办法帮忙改进下debounce或者别的方法能够让错误反馈到输入框下面吗

相关代码

antd表单自定义验证代码:

() => ({
  async validator(_, value) {
    return debounce(() => handleCheckUsername(value), 500)
  },
}),

handleCheckUsername:

  const handleCheckUsername = async (username) => {
    try {
      const res = await checkUsername({ username })
      if (res.success) {
        return Promise.resolve()
      }
      return Promise.reject(new Error(res.message))
    } catch (error) {
      console.log('🚀  handleCheckUsername  error', error)
    }
  }

debounce:

export const debounce = (() => {
  let timer = null
  return (callback, wait = 800) => {
    timer && clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})()

你期待的结果是什么?实际看到的错误信息又是什么?

想要跟正常的rules验证一样,将错误反馈到输入框下面antd自定义表单验证使用debounce请求接口无法反馈到表单下面,各位大佬有什么解决方法吗?但是由于debounce返回的是undefined,实际上错误只反馈到了控制台上

回复
1个回答
avatar
test
2024-07-11

使用 debounce-promise

import debounce from 'debounce-promise'

const handleCheckUsername = async (username) => {
  try {
    const res = await checkUsername({ username })
    return !!res.success
  } catch (error) {
    console.log('🚀  handleCheckUsername  error', error)
  return false
  }
}

() => ({
  async validator(_, value) {
    if (!(await handleCheckUsername(value))) {
      throw 'invalid'
    }
  },
}, 500)

V4 validator使用debounce后表现异常 这个issue下面有解决方法

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容