Проверка формы React в componentDidUpdate ()

Question

У меня есть форма, которая использует огромное количество логи c с автозаполнением полей, в зависимости от ввода пользователя et c. Кроме того, мне нужно обеспечить проверку в реальном времени, пока пользователь печатает.

Я использовал для вызова валидаторов вручную, в зависимости от того, какие поля setState () будет обновлять, но очень скоро это стало недоступным. Затем я создал функцию, которая вызывает все имеющиеся у меня методы валидатора и вручную вызывает ее каждый раз, когда я обновляю состояние.

Теперь я думаю о том, чтобы пойти дальше, и автоматизировать вызов этой функции. Я хочу реализовать это, используя componentDidUpdate() метод реакции жизненного цикла.

componentDidUpdate(prevProps, prevState) {  
  if (_.isEqual(prevState.data, this.state.data))
    return;
  this.validateAll();
}

Теперь, если какое-либо поле формы изменилось - мы запускаем полную проверку, чтобы убедиться, что мы ничего не забыли. Однако проблема в том, что loda sh _.isEqual() является дорогостоящей операцией глубокого сравнения, а метод жизненного цикла componentDidUpdate() вызывается при любом вводе пользователем, поэтому это может потенциально привести к проблемам с производительностью.

Я решил чтобы уменьшить количество этих сравнений, а также количество вызовов функций проверки путем разбора.

handleValidation = (prevState) => {
  if (_.isEqual(prevState.data, this.state.data))
    return;
  this.validateAll();
};

debouncedHandleValidation = _.debounce(this.handleValidation, 200);

componentDidUpdate(prevProps, prevState) {
  this.debouncedHandleValidation(prevState);
}

Вот демо Live (обращения к глубокому сравнению и проверке регистрируются)

Мой вопрос: Можно ли так обрабатывать проверку формы, или есть что-то, чего я не учел, и мой подход плохой?

Спасибо.

Answer 1

Самым распространенным шаблоном обработки валидации форм в реагировании является проверка правильности ввода в его onChange реквизитах.

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

Другая очевидная причина заключается в том, что концептуально проверка относится к мутации на входе, а не к жизненному циклу обновления компонента .

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

Все вышеперечисленное, без затрат на глубокие сравнения.

Пример:

handleChange = (event) => {
  event.preventDefault();
  const { name, value } = event.target;
  let errors = this.state.errors;

  switch (name) {
    case 'fullName': 
      errors.fullName = 
        value.length < 5
          ? 'Full Name must be 5 characters long!'
          : '';
      break;
    case 'email': 
      errors.email = 
        validEmailRegex.test(value)
          ? ''
          : 'Email is not valid!';
      break;
    case 'password': 
      errors.password = 
        value.length < 8
          ? 'Password must be 8 characters long!'
          : '';
      break;
    default:
      break;
  }

  this.setState({errors, [name]: value}, ()=> {
      console.log(errors)
  })
}