Ant Design中如何获取表单字段旧值 避免无修改失焦重复校验

你不需要额外引入第三方库存储状态，基于 Ant Design Form 自带的能力就能实现需求，核心逻辑是在校验逻辑执行前先对比当前值和字段旧值，值未变更时直接跳过校验即可，有两种可落地的实现方式：

方式1：直接读取表单初始值（推荐，无需额外存状态） #

Ant Design Form 实例提供了getInitialValue方法，可以直接拿到字段的初始旧值（即表单初始化/最近一次重置/回填后设置的基准值），你只需要修改原有校验器逻辑即可：

// 从Form.useForm()拿到表单实例直接使用即可
const [form] = Form.useForm()

const nameValidator = async (rule, value) => {
  // 读取字段旧值
  const originValue = form.getInitialValue('name')
  // 当前值和旧值完全一致，直接放行不触发校验
  if (value === originValue) {
    return Promise.resolve()
  }
  // 原有重名校验逻辑，比如调用接口校验名称唯一性
  const isNameDuplicate = await checkNameUniqueApi(value)
  if (isNameDuplicate) {
    return Promise.reject('Name is not unique')
  }
  return Promise.resolve()
}

如果你的表单是编辑场景、数据为异步回填，只需要在回填数据时同步更新表单的initialValues，或者回填后调用form.resetFields()让表单把当前回填值识别为新的初始值即可。

方式2：用Ref存储旧值（适配复杂场景） #

如果你的场景里初始值会动态变化、不方便通过Form的initialValues管理，可以用React的useRef单独存储字段旧值：

const [form] = Form.useForm()
// 存储name字段的旧值
const originNameRef = useRef('')

// 异步回填数据时同步更新旧值
useEffect(() => {
  fetchEditDetail().then(detail => {
    form.setFieldsValue(detail)
    originNameRef.current = detail.name
  })
}, [])

const nameValidator = async (rule, value) => {
  if (value === originNameRef.current) {
    return Promise.resolve()
  }
  // 原有校验逻辑
}

注意事项 #

• 如果字段值是对象、数组等引用类型，不要直接用===判断相等，需要根据业务场景做浅比较/深比较
• 该实现除了满足「值未变更失焦不触发校验」的需求，还能减少不必要的异步校验接口请求，优化页面性能

内容的提问来源于stack exchange，提问作者howard wolowitz