Yup异步验证测试被多次调用，如何仅在值变更时触发测试或避免对相同值重复验证

嘿，这个问题我之前也碰到过！Yup默认会在很多场景下触发验证（比如表单其他字段变化、提交时），哪怕当前字段值没改也会跑一遍异步test，确实挺浪费请求的。这里给你两个实用的解决思路：

1. 给异步验证加缓存，跳过相同值的重复请求 #

我们可以用闭包创建一个缓存容器，把已经验证过的zipCode和结果存起来，下次遇到相同值直接返回缓存结果，不用再调用API。代码改造如下：

// 用Map做缓存，键是zipCode值，值是验证结果（true/false）
const zipValidationCache = new Map();

const validationSchema = yup.object().shape({
  zipCode: yup.string().required()
    .test('invalidZip', 'ZipCode must be valid', async (value, context) => {
      // 先检查缓存里有没有这个值的结果
      if (zipValidationCache.has(value)) {
        return zipValidationCache.get(value);
      }

      // 没有缓存才发起验证请求
      const isValid = await new Promise((resolve) => {
        Utils.validateZipCode(value, resolve);
      });

      // 把结果存入缓存，下次复用
      zipValidationCache.set(value, isValid);
      return isValid;
    })
});

补充说明： #

• 如果你需要在表单重置、切换场景时清空缓存，直接调用zipValidationCache.clear()就行。
• 建议把Utils.validateZipCode改造成返回Promise的函数，这样代码更简洁：

  // 改造Utils工具函数
  Utils.validateZipCode = (value) => {
    return new Promise((resolve) => {
      // 原来的API验证逻辑，完成后resolve(true或false)
    });
  };
  
  // 验证函数可以简化成：
  .test('invalidZip', 'ZipCode must be valid', async (value) => {
    if (zipValidationCache.has(value)) return zipValidationCache.get(value);
    const isValid = await Utils.validateZipCode(value);
    zipValidationCache.set(value, isValid);
    return isValid;
  })
  

2. 结合表单库控制验证触发时机 #

如果你用的是Formik、React Hook Form这类表单库，可以从源头控制验证什么时候触发，比如只在zipCode字段变化或失焦时验证，而不是每次表单有变动就跑所有验证：

以Formik为例： #

<Formik
  initialValues={{ zipCode: '' }}
  validationSchema={validationSchema}
  validateOnChange={true}       // 字段变化时验证
  validateOnBlur={true}         // 字段失焦时验证
  validateOnMount={false}       // 组件挂载时不验证（避免初始无意义调用）
  onSubmit={(values) => { /* 提交逻辑 */ }}
>
  {/* 你的表单组件 */}
</Formik>

以React Hook Form为例： #

const { register, handleSubmit, formState: { errors } } = useForm({
  mode: 'onChange', // 只在字段变化时验证
  defaultValues: { zipCode: '' }
});

// 注册字段时关联Yup验证（或直接用缓存逻辑）
<input
  {...register('zipCode', {
    validate: async (value) => {
      if (zipValidationCache.has(value)) return zipValidationCache.get(value);
      const isValid = await Utils.validateZipCode(value);
      zipValidationCache.set(value, isValid);
      return isValid || 'ZipCode must be valid';
    }
  })}
/>

总结 #

优先用缓存+表单时机控制的组合方案，既减少不必要的API请求，又能避免无意义的验证触发，完美解决你遇到的问题！

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