Пользовательский хук React для проверки работает неправильно

Так что это определенно можно решить, используя refs и немного изменив функцию проверки.

Хотя это можно сделать с помощью одной функции проверки, помните, что необходимо передать функции значения полей, которые она должна проверять. Без этого он не знал бы, какие значения проверять, и проверял бы все значения.

Вот как я бы изменил функцию проверки:

const errMap = {
  emailAddress: "Email address is required",
  password: "Password is required",

  fName: "first name is required",
  lName: "last name is required"
};

function validate(values, namesToCheck) {
  let errors = {};

  for (let i = 0; i < namesToCheck.length; i++) {
    if (!values[namesToCheck[i]]) {
      errors[namesToCheck[i]] = errMap[namesToCheck[i]];
    }
  }
  return errors;
}

errMap — это просто простой объект конфигурации, чтобы указать, как будет выглядеть ошибка каждого значения поля. Ключ — это имя поля, а значение — это сообщение об ошибке.

Поскольку наше решение должно быть достаточно расширяемым для ситуации, когда не все поля в одной форме нуждаются в проверке, хук также должен измениться. Он должен разрешать передачу только тех полей, которые необходимо проверить.

const useForm = (callback, validate, inputsToCheck) => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
  }, [errors]);

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

    let namesToCheck = inputsToCheck.map(({ current: { name } = {} }) => name);

    setErrors(validate(values, namesToCheck));
    setIsSubmitting(true);
  };

  const handleChangeEvent = (event) => {
    event.persist();
    setValues((values) => ({
      ...values,
      [event.target.name]: event.target.value
    }));
  };

  return {
    handleChangeEvent,
    handleSubmit,
    values,
    errors
  };
};

Есть два изменения:

1. Добавлен новый параметр, который содержит все ссылки на входы для проверки.
2. handleSubmit изменен для извлечения имен, которые необходимо передать validate.

Наконец, передача правильных ссылок на хук завершит решение.

const Form2 = () => {
  const btn2Click = () => {
    console.info("form2", values);
  };
  const fnameRef = useRef();
  const lnameRef = useRef();

  const { values, errors, handleChangeEvent, handleSubmit } = useForm(
    btn2Click,
    validate,
    [fnameRef, lnameRef]
  );
  return (
    <div>
      <form onSubmit = {handleSubmit}>
        <div className = "row">
          <div className = "input-group">
            <label>First name</label>
            <input
              ref = {fnameRef}
              type = "text"
              className = {`${errors.fName && "input-error"}`}
              name = "fName"
              id = "fName"
              onChange = {handleChangeEvent}
              value = {values.fName || ""}
            />
            <p className = "error-text">{errors.fName}</p>
          </div>

          <div className = "input-group">
            <label>last name</label>
            <input
              ref = {lnameRef}
              type = "text"
              className = {`${errors.lName && "input-error"}`}
              name = "lName"
              id = "lName"
              onChange = {handleChangeEvent}
              value = {values.lName || ""}
            />
            <p className = "error-text">{errors.lName}</p>
          </div>
        </div>
        <button type = "submit" className = "btn">
          Click 2
        </button>
      </form>
    </div>
  );
};

коды и ссылка на ящик

PS: Я не вижу никакой проблемы в создании двух функций проверки. Оба могут находиться в одном и том же файле. И тогда вы можете передать правильный при вызове вашего хука. С отдельными функциями проверки вам не нужно передавать список входных данных, которые необходимо проверить, поскольку ваша индивидуальная функция проверки будет обслуживаться вашими полями формы. Я также хотел бы предложить, чтобы ваши индивидуальные методы проверки находились рядом с вашими формами. Form1 с Validate1 (при необходимости в отдельном файле).

Вы не показали полный пример, но похоже, что вы делите одно и то же состояние между двумя формами.

Хуки создают новые переменные состояния каждый раз, когда они вызываются. Итак, если вам нужны две формы с отдельным состоянием, вам нужно дважды вызвать хук:

  const {
    values: values1,
    errors: errors1,
    handleChangeEvent: handleChangeEvent1,
    handleSubmit: handleSubmit1,
  } = useForm(btnClick, validate);

  const {
    values: values2,
    errors: errors2,
    handleChangeEvent: handleChangeEvent2,
    handleSubmit: handleSubmit2,
  } = useForm(btnClick, validate);

Затем вы можете дать каждой форме соответствующие свойства.

Примечание: я не знаю, что такое btnClick, поэтому не знаю, нужны ли вам две его копии.

Если что-то непонятно, то покажите полный пример с обеими формами.