reactjs - 在 React 自定义 Hook 中 onChange 时验证输入的最佳实践？

Question

我构建了一个自定义 Hook 来处理表单。我遇到的一件事是在输入值发生变化时调用验证。

我有四个代码片段。第二个和第三个仅用于显示完整自定义 Hook 的上下文，但请随意跳过它们，因为我只是好奇如何在代码段 4 中实现代码段 1 中的类似功能。

除了在提交时调用它之外，我想这样做的原因是，如果输入值变成 ' '，我想显示错误消息，当用户开始输入时它会消失。

当我不使用钩子(Hook)时，这非常简单，我会在 setState 之后调用一个验证函数，如下所示:

const validate = (name) => {
  switch(name):
    case "username":
      if(!values.username) {
        errors.username = "What's your username?";
      }
      break;
    default:
      if(!values.username) {
        errors.username = "What's your username?";
      }

      if(!values.password) {
        errors.username = "What's your password?";
      }

      break;
}

const handleChange = (e) => {
  let { name, value } = e.target; 

  this.setState({ ...values, 
    [name]: value 
  }, () => this.validate(name)) 
}

所以现在使用 React Hooks 并不容易。我创建了一个自定义表单处理程序，它返回值、错误、handleChange 和 handleSubmit。向表单处理程序传递一个 initialState、验证函数和一个回调。截至目前，它看起来像这样:

import useForm from './form.handler.js';
import validate from './form.validation.js';

const schema = { username: "", password: "" }

export default function Form() {
  const { values, errors, handleChange, handleSubmit } = useForm(schema, validate, submit);

  function submit() {
    console.log('submit:', values);
  }

  return (
    <form></form> // form stuff
  )
}

这是验证文件。很简单，它只需要两个字段的值。

export default function validate(values) {
  let errors = {};

  if(!values.username) {
    errors.username = "What's your username?";
  }

  if(!values.password) {
    errors.password = "What's your password?";
  }

  return errors;
}

现在这是我的表单处理程序，我正在尝试解决这个问题。我一直在尝试在 useEffect 中调用 setErrors(validate(values)) 但无法访问输入。我不确定，但目前，自定义 Hook 如下所示:

import { useState, useEffect, useCallback } from 'react';

export default function useForm(schema, validate, callback) {
  const [values, setValues] = useState(schema),
        [errors, setErrors] = useState({}),
        [loading, setLoading] = useState(false); // true when form is submitting

  useEffect(() => {
    if(Object.keys(errors).length === 0 && loading) {
        callback();
    }

    setLoading(false);
  }, [errors, loading, callback])

  // I see useCallback used for event handler's. Not part of my questions, but is it to prevent possible memory leak?
  const handleChange = (e) => {
    let { name, value } = e.target;

    setValues({ ...values, [name]: value });
  }

  const handleSubmit = (e) => {
    e.preventDefault();

    setLoading(true);
    setErrors(validate(values));
  }

  return { values, errors, handleChange, handleSubmit }
}

Answer 1

我不确定在设置状态(值)的回调中设置其他状态(错误)是否是个好主意，因此创建了一个 code review

如评论；您可以在设置值时设置错误:

const Component = () => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const onChange = useCallback(
    (name, value) =>
      setValues((values) => {
        const newValues = { ...values, [name]: value };
        setErrors(validate(newValues));//set other state while in a callback
        return newValues;
      }),
    []
  );
  return <jsx />;
};

或者组合值和错误:

const Component = () => {
  const [form, setForm] = useState({
    values: {},
    errors: {},
  });
  const onChange = useCallback(
    (name, value) =>
      setForm((form) => {
        const values = { ...form.values, [name]: value };
        const errors = validate(values);
        return { values, errors };
      }),
    []
  );
  const { errors, values } = form;
  return <jsx />;
};