YUP/Formik带去反跳的异步验证 [英] Yup / Formik async validation with debounce
本文介绍了YUP/Formik带去反跳的异步验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将取消退回应用于下面的异步验证(code from Yup's github)?
let asyncJimmySchema = string().test(
'is-jimmy',
'${path} is not Jimmy',
async (value) => (await fetch('/is-jimmy/' + value)).responseText === 'true',
});
推荐答案
您可以使用lodash.debounce
:
import { debounce } from "lodash";
// ...
const ASYNC_VALIDATION_TIMEOUT_IN_MS = 1000;
const validationFunction = async (value, resolve) => {
try {
const response = await fetch('/is-jimmy/' + value);
resolve(response.responseText === 'true');
} catch (error) {
resolve(false);
}
};
const validationDebounced = debounce(validationNameFunction, ASYNC_VALIDATION_TIMEOUT_IN_MS);
然后在验证方案中:
let asyncJimmySchema = string().test(
'is-jimmy',
'${path} is not Jimmy',
value => new Promise(resolve => validationDebounced(value, resolve)),
});
这篇关于YUP/Formik带去反跳的异步验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文