值更新时表单验证不更新。但正确加载错误

Question

我添加了表单验证。当字段中没有值时，它在提交时工作正常。如果我在提交时向表单字段添加有效数据，则错误未清除。无法理解问题。

这是我的代码：

const App = () => {
  const { values, onChangeHandler, onSubmitForm, errors } =
    FormValidator(ValueValidator);

  console.log('errors', errors);
  return (
    <div>
      <form
        name="contactform"
        className="contactform"
        autoComplete="off"
        onSubmit={onSubmitForm}
      >
        <label htmlFor="username" className={errors.username ? 'error' : ''}>
          <input
            id="username"
            name="username"
            autoComplete="off"
            onChange={onChangeHandler}
            value={values.username}
            placeholder="Name"
            type="text"
          />
        </label>
        <p>{errors.username && 'user name is required'}</p>
        <div>
          <label htmlFor="email" className={errors.email ? 'error' : ''}>
            <input
              placeholder="Email"
              autoComplete="off"
              onChange={onChangeHandler}
              value={values.email}
              type="email"
              name="email"
              id="email"
            />
          </label>
        </div>
        <label className="message" htmlFor="message">
          <textarea
            placeholder="Message"
            autoComplete="off"
            name="message"
            id="message"
          ></textarea>
        </label>
        <div>
          <button type="submit">Send</button>
        </div>
      </form>
    </div>
  );
};

Live Demo

Answer 1

出现此问题是因为您实际上并未重置

let errors = initialErrorsProps;

在 valueValidator.tsx 就像你认为的那样。

当你这样做时

errors.email = 'Email name required';

您实际更新的是对 initialErrorsProps 常量的引用。所以你会看到当你在验证失败后重新提交时，错误已经用以前的值填充了。

发生这种情况是因为对象是通过引用传递的。更多详情在这里：

一个简单的解决方案就是在方法的开头设置您的对象：

let errors = {
   username: '',
   email: '',
};

值更新时表单验证不更新。但正确加载错误

Form validation not updationg when values are updated. but errors on load correctly

reactjs

react-forms