检查网站是否存在，如果不存在，则在表单输入字段下显示错误消息

Question

我对 JS 和 React 还很陌生，我正在使用 React Hook Form 我必须检查在我的表格中输入的网站是否存在。 如果 URL 不存在，我必须在网站字段下显示一条错误消息“网站不可用”，这将使用 FormError 组件呈现。

（这是一个名字字段，但由于我使用的是普通的 TextField 组件，它也应该在这里工作）

所以，我正在使用“url-exists”包来测试网站 URL 是否存在，如果该网站不存在，它应该会生成一个错误为“网站不可用”。

我就是用这段代码来实现的。

const websiteCheck = (value) => {
  let str = value;
  let message = "";
    let urlCheck = str.indexOf("http://") == 0 || str.indexOf("https://") == 0;
    if (!urlCheck) {
        console.log("Protocol doesn't exist!");
        str = "http://" + str;
    } else {
        console.log("Protocol exists!");
    }
    urlExists(str, function (err:any, exists:any) {
      if (!exists) {
        message = "Website doesn't exists!" //Just for testing
        console.log("Not available: ", str, exists);
      } else {
        message = "Website exists!"
        console.log("Available: ", str, exists);
    }
        // console.log(exists); // true
    });
  return message;
}

我称它为：

return(
.....
 <TextField
        key={fieldName}
        id={fieldName}
        .......
        inputRef={register({
            websiteCheck(value)
       ........
 />

这在理想情况下应该可以工作，但即使我输入正确且有效的 URL，它也会在 console.log() 中给我“不可用”消息。 它仍然不会呈现我设置的消息。

到目前为止，我从调试中发现的是：

1. 当我提交表单时，我输入的 URL 被接受，但它不会进入我的 if(!exists)..else 块，并且我在控制台中看到“不可用”。
2. 它第二次提交进入 if(!exists)...else 块并显示“不可用”的空值（或空间 idk）

我应该怎么做才能解决这个问题？

Answer 1

您必须在此处更正一些事情才能使其正常工作：

• 在使用 Material UI <TextField /> 时，您应该使用 <Controller />，有关它的更多信息，请参阅文档中的 section
• 你需要通过<Controller />的rules属性使用RHF提供的validate函数，检查here的所有验证选项（register和rules使用相同的接口进行验证）
• urlExists 使用回调，因此您需要将对 urlExists 的调用包装到 Promise 并将其设置为您的 websiteCheck 函数的返回值。现在，您甚至在执行回调之前就返回了一个字符串。这里重要的是还要让你的websiteCheck函数async，这样Promise就会得到解决（RHF的validate函数支持使用async函数）
• 还需要注意的是，如果输入的值正确，则必须为validate 函数返回true。如果不使用字符串作为错误消息