表单中的字段要求我关注它们才能显示错误消息。我希望在我尚未聚焦字段时单击“提交”时出现错误消息。

这是钩子（怀疑是关于稍后的 setIsTouched 调用）：

const useInputModifed = (validationArray) => {
  const [enteredValue, setEnteredValue] = useState("");
  const [isTouched, setIsTouched] = useState(false);

  //   [{errorName:,fn:validationFn}]
  let errorArray = [];

  for (const errorEntry of validationArray) {
    if (errorEntry.isErrorFn(enteredValue)) {
      errorArray.push(errorEntry.errorName);
    }
  }

  const hasError = errorArray.length > 0 && isTouched;

  const valueChangeHandler = (event) => {
    setEnteredValue(event.target.value);
  };

  const reset = () => {
    setEnteredValue("");
    setIsTouched(false);
  };

  console.log(errorArray, isTouched);

  return {
    value: enteredValue,
    validationArray: errorArray,
    hasError,
    valueChangeHandler,
    setIsTouched,
    isTouched,
    reset,
  };
};

这是表单处理程序（我为每个字段使用了别名）：

const formSubmissionHandler = (event) => {
    event.preventDefault();
    touchNameField(true);
    touchEmailField(true);


    if (nameInputHasError || emailInputHasError) {
 //console logging both fields gives false even after touching
      return;
    }
  
    if (!nameInputHasError && !emailInputHasError) {
      resetNameInput();
      resetEmailInput();
    }
  };

以验证名称字段为空为例，我单击开头的提交按钮。 目前在 const hasError = errorArray.length > 0 && isTouched; 中，数组有元素，但 isTouched 为 false，因为我没有聚焦该字段。

然后是“touchNameField(true);”进来了。我尝试使 hasError 为 true，但它仍然显示为 false。

setState 调用是异步的，这是问题所在吗？如果我删除重置调用它就可以了。但我仍然不明白为什么 nameInputError 等是 false。