reactjs 是-仅在值更改时运行异步验证测试

scyqe7ek  于 2022-12-29  发布在  React
关注(0)|答案(3)|浏览(488)

是的,异步验证测试被调用了多次。是否有办法仅在值发生更改时调用测试,或者防止对同一值进行验证检查

const validationSchema = yup.object().shape({
    zipCode: yup.string().required()
        .test('invalidZip', 'ZipCode must be valid', (value, context) => {
            /**
             * api call to validate zip code
             * this is getting called multiple times even though there is no change in 
             * zipCode.
             * I want to run this test only if there is change in value
             */
            return new Promise.resolve((resolve) => Utils.validateZipCode(value, resolve));
        })
});
5q4ezhmt

5q4ezhmt1#

遗憾的是,yup会对模式中的所有字段进行验证,无论哪个字段被更改。当你在yup测试中进行远程调用时(例如REST请求),这会特别痛苦。这是一个已知的问题,请参阅此线程以了解许多变通方法https://github.com/jaredpalmer/formik/issues/512。我使用的方法基于thenameisflic的回答,如下所示:

const cacheTest = (asyncValidate: (val: string) => Promise<boolean>) => {
    let _valid = false;
    let _value = '';

    return async (value: string) => {
        if (value !== _value) {
            const response = await asyncValidate(value);
            _value = value;
            _valid = response;
            return response;
        }
        return _valid;
    };
};

const actualValidityTest = cacheTest(
    (value: string) => new Promise(
        (resolve) => yourTestLogic()
    )
);

然后像这样插进去

.test(
    'test_name',
    'some message',
    shopNameValidityTest
)

修复的主要思想是缓存先前传递给测试的值以及先前的验证结果。如果值未更改,则返回先前的验证结果。但是,如果验证的值更改,则运行实际验证并缓存结果。
这个解决方案的一个优点是它非常通用,您可以将任何测试 Package 在cacheTest中并避免不必要的验证。

0s0u357o

0s0u357o2#

https://github.com/jaredpalmer/formik/issues/512
mahj0ubiwael的答案在这里。document.activeElement.id.获取字段id并在您的

.test(email,"err string",() => {
if(document.activeElement.id === "email"){
// Validate here
}
})
gjmwrych

gjmwrych3#

你没有发送代码,所以我不知道你的问题到底是什么,但试试这个:onChange或选择仅当值更改时调用异步函数,并且仅当您不在输入焦点范围内时才会触发验证

<input onChange = {this.props.handleChange} onBlur = {this.props.handleBlur}/>

相关问题