在 componentDidUpdate() 中验证 React 表单

Question

我有一个表单，它使用大量逻辑和自动填充字段，具体取决于用户输入等。 此外，我需要在用户输入时提供实时验证。

我曾经手动调用验证器，这取决于 setState() 将更新哪些字段，但很快就变得无法维护。然后我创建了一个函数来调用我拥有的所有验证器方法，并在每次更新状态时手动调用它。

现在我考虑更进一步，并自动调用该函数。我想使用 componentDidUpdate() react 生命周期方法。

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

现在，如果任何表单字段发生更改 - 我们会运行完整验证以确保我们没有忘记任何内容。但问题是 lodash _.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 demo（记录对深度比较和验证的调用）

我的问题是：这样处理表单验证可以吗，或者有什么我没有采取 考虑到我的方法不好？

谢谢。

Answer 1

在 react 中处理表单验证的最常见模式是检查输入在其 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)
  })
}