反应实时表单验证消息在更改后消失

Question

当我错误地提交表单时，验证消息会显示在每个表单输入下。我也尝试实现“实时”验证，因此，如果他们去了不正确的字段之一并对其进行了修复，则该字段的错误消息将消失，而其他不正确的字段的其他消息仍应存在。但是，发生的情况是，纠正了一个字段后，所有错误消息都会消失，而不仅仅是该输入的错误消息。

  const schema = {
    firstName: Joi.string()
      .alphanum()
      .required()
      .min(2)
      .max(30)
      .label("First Name"),
    lastName: Joi.string()
      .required()
      .alphanum()
      .min(2)
      .max(30)
      .label("Last name"),
    email: Joi.string()
      .email({ minDomainAtoms: 2 })
      .label("Email")
      .required()
  };

 const [form, setState] = useState({
    firstName: "",
    lastName: "",
    email: ""
  });
  const [formErrors, setFormErrors] = useState({});


// used to validate the entire form on submit
  const validate = () => {
    const options = { abortEarly: false };

    const result = Joi.validate(form, schema, options);
    if (!result.error) return null;

    const errors = {};
    for (let item of result.error.details) errors[item.path[0]] = item.message;
    return errors;
  };

// used for 'live' validation on each input field onChange
  const validateProperty = ({ name, value }) => {
    const obj = { [name]: value };
    const schemaName = { [name]: schema[name] };
    const { error } = Joi.validate(obj, schemaName);
    return error ? error.details[0].message : null;
  };


  const handleChange = event => {
    const errors = { ...formErrors };
    const formErrors = validateProperty(event.currentTarget);
    if (formErrors) errors[event.currentTarget.name] = formErrors;
    else delete errors[event.currentTarget.name];
    setState({
      ...form,
      [event.target.name]: event.target.value
    });
    setFormErrors(errors);
  };

  const handleSubmit = async event => {
    event.preventDefault();

    const formErrors = validate();
    setFormErrors(formErrors || {});
    if (formErrors) return;
  };

这是firstName字段输入的示例：

            <div className="form-group mb-5">
              <label htmlFor="firstName">First Name *</label>
              <input
                type="text"
                className="form-control form-control-lg"
                id="firstName"
                name="firstName"
                value={form.firstName}
                onChange={handleChange}
              />
              <span className="input-error">
                {formErrors.firstName && formErrors.firstName}
              </span>
            </div>

在下一个屏幕截图中，请注意，即使我只修复了一个字段，验证错误也都消失了。其他2条验证错误消息仍然应该可见。