如何在 Yup.test 上执行 setTimeout？

如何解决如何在 Yup.test 上执行 setTimeout？

我正在尝试验证地址：

  line1: Yup.string()
    .test(
      "Address Line 1 Validation Test","Please enter valid Line 1 address",async (line1: string) => {
        let delayTimer = null;
        let isValid = false;
        const doSearch = () => {
          clearTimeout(delayTimer);
          delayTimer = setTimeout(async () => {
            const { data } = await axios.get<{ status: string }>(
              "https://maps.googleapis.com/maps/api/geocode/json?components=country:USA",{
                params: {
                  address: line1,key: GEOCODE_API_KEY,},}
            );
            console.log("line1: ",line1);
            console.log("data: ",data);
            isValid = data.status === "OK" ? true : false;
          },1000); // Will do the ajax stuff after 1000 ms,or 1 s
        };
        doSearch();
        return isValid;
      }
    )
    .required("Line 1 is required"),

我想像这样集成延迟搜索，这样我就不会每次用户输入这样的 api：AJAX: Delay for search on typing in form field

但每次用户输入时它都会执行 api 请求。我如何实施？

解决方法

问题在于您实际上从未清除超时。

每次运行处理程序时，都会创建和初始化新的 delayTimer、isValid 和 doSearch 变量。这些变量必须放在外部作用域中。像这样：

let delayTimer = null;
let isValid = false;

Yup.string()
    .test(
        'Address Line 1 Validation Test','Please enter valid Line 1 address',async (line1: string) => {
            clearTimeout(delayTimer);
            
            delayTimer = setTimeout(async () => {
                const {data} =
                    (await axios.get) <
                    {status: string} >
                    ('https://maps.googleapis.com/maps/api/geocode/json?components=country:USA',{
                        params: {
                            address: line1,key: GEOCODE_API_KEY
                        }
                    });
                console.log('line1: ',line1);
                console.log('data: ',data);
                isValid = data.status === 'OK';
            },1000); // Will do the ajax stuff after 1000 ms,or 1 s
            
            return isValid;
        }
    )
    .required('Line 1 is required');

现在，即使这解决了您最初的问题，还有另一个问题需要解决。您的函数将始终返回带有错误值 isValid 的承诺。

你必须做什么取决于你想要什么，但我会给你以下见解：

let delayTimer = null;
let isValid = false;
let resolveRef = null;

Yup.string()
    .test(
        'Address Line 1 Validation Test',async (line1: string) => {
            clearTimeout(delayTimer);

            if (resolveRef) {
                resolveRef(isValid);
                resolveRef = null;
            }

            return await new Promise((resolve) => {
                resolveRef = resolve;
                delayTimer = setTimeout(async () => {
                    const {data} =
                    (await axios.get) <
                    {status: string} >
                    ('https://maps.googleapis.com/maps/api/geocode/json?components=country:USA',{
                            params: {
                                address: line1,key: GEOCODE_API_KEY
                            }
                        });

                    isValid = data.status === 'OK';

                    resolve(isValid);
                    resolveRef = null;
                },1000);
            });
        }
    )
    .required('Line 1 is required');

希望它有效。请告诉我。