Javascript 如何正确显示自定义钩子验证中的错误消息？

我有一个多步骤的表格。当前，父组件通过传递给表单组件的道具获取状态数据。“提交”按钮位于父组件中。这是可行的，步骤也是可行的。但是，当单击输入字段时，当其失去焦点时，会触发多步骤表单中每个字段的错误消息，而不是触发错误的字段是唯一出现错误的字段。我正在使用

的

error

属性为用户触发错误视觉效果。字段也在

validateAuth.js

中验证，值在

useFormValidation.js

中处理。我还坚持从父组件中的一个提交按钮从父组件状态提交用户注册表单数据

我已经尝试在useffect钩子中设置errors={errors}并使用if语句，例如

React.useEffect(() => {
  if (props.errors) {
    setErr(true)
  }
}, [err, props.errors]);

然而，这导致我的整个页面加载错误显示，没有任何用户输入

这是一个代码沙盒，与我的确切开发设置类似

代码是一样的，只是简化了一些基本的东西

预期结果：多步骤表单在用户每次尝试通过单击“下一步”转到下一步时加载、验证字段，如果出现错误，则仅以红色显示导致错误的字段，并通过材质ui helpertext显示错误文本。当该步骤中的输入字段出现错误时，用户应无法转到下一步。当一个字段显示错误时，其余未出错的字段将保持正常的非错误状态。在最后一步中，验证按钮提交用户数据以进行注册

---

实际情况：表单会对所有字段出错，一旦单击任何输入字段，用户就会单击其他任何位置，并导致该字段失去焦点。用户可以在注册步骤中自由单击，而无需考虑任何错误。

如果您检查您的

validateAuth.js

，此代码将整体检查所有输入。第一次调用此函数时，所有输入值都为空，这就是为什么在所有输入中都出现错误的原因。我认为，如果您在同一页面中有所有输入，并在按下提交按钮时进行验证，则这种代码是合适的。 但是，在您的情况下，您应该更改您的验证以检查像这样的单个输入值

export default function validateAuth(input) {
 let errors = {};
 switch (input.key) {
 case "email": {
  if (!input.value) {
    errors.email = "Required Email";
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(input.value)
  ) {
    errors.email = "Invalid email address";
  }
  return errors;
 }
 case "password": {
  if (!input.value) {
    errors.password = "Required Password";
  } else if (input.value.length < 6) {
    errors.password = "Password must be at least 6 characters";
  }
  return errors;
 }
 case "username": {
  if (!input.value) {
    errors.username = "Required Username";
  } else if (input.value.length < 6) {
    errors.username = "Username must be 6-12 characters";
  }
  return errors;
 }
 case "verify": {
  if (!input.value) {
    errors.verify = "Required Verification";
  } else if (input.value.length < 1) {
    errors.verify = "Please input the 4 digit code.";
  }
  return errors;
 }
 default:
   return errors;
 }
}

然后，您应该添加一个checkonerror对象来启用/禁用next按钮

---

关于相关代码（不在codesandbox中）的一个注意事项-依赖项数组应包含

useffect（…，[props.errors]）

根据eslint规则。感谢您的帮助！这是我对“下一步”按钮进行编辑后的最终版本。

function handleBlur(e) {
 const { name, value } = e.target;
 const input = {
  key: name,
  value
 };
 const validationErrors = validate(input);
 setErrors({
  ...errors,
  ...validationErrors
 });
}