React使用自定义useForm hook报validation is not a function错误如何解决

核心报错原因 #

你自定义的useForm钩子参数定义顺序和调用时的传参顺序不匹配导致：

• useForm定义时的参数顺序是(callback, validation)，第一个参数是提交成功后的回调函数，第二个才是验证函数
• 你在Signup组件调用useForm(validation)的时候，只传了验证函数作为第一个参数，导致hook内部接收的validation参数是undefined，调用时自然会报validation不是函数的错误

除此之外你的代码还存在多个隐藏bug，需要同步修复： #

所有问题修复步骤 #

1. 修正参数匹配问题 #

两种方案二选一即可：

• 方案一：调整useForm的参数顺序，把常用的验证函数放第一位

// 修改useForm的参数定义顺序
const useForm = (validation, callback) => {
  // 原有逻辑保持不变
}

• 方案二：调用useForm的时候按定义顺序传参，补充提交成功的回调函数

// Signup组件内新增验证通过后的回调函数
const submitSuccess = () => {
  // 这里写验证通过后要执行的逻辑，比如提交接口、跳转页面等
  console.log('表单验证通过，可以提交')
}
// 调用useForm时按顺序传参
const { handleChange, values, handleSubmit, errors } = useForm(submitSuccess, validation);

2. 修正useState解构错误 #

useState返回值是数组不是对象，需要把大括号改成方括号：

// useForm内的useState解构修改为
const [values, setValues] = useState({
  name: "",
  lastname: "",
  username: "",
  email: "",
  pass: "",
  pass_conf: "",
});

3. 修正变量拼写错误 #

Signup组件里解构useForm返回值时，你写的是hadleChange，正确的返回值是handleChange，所有用到该变量的地方都要同步修改：

// 修正拼写错误
const { handleChange, values, handleSubmit, errors } = useForm(submitSuccess, validation);

4. 修正密码验证逻辑错误 #

现有两个密码判断逻辑写法错误：

• 密码长度判断写的是values.pass < 8，要改成values.pass.length < 8
• 密码确认判断写的是values.pass_conf == !values.pass，要改成values.pass_conf !== values.pass

// 修正后的密码验证逻辑
// 密码校验
if (!values.pass.trim()) {
  errors.pass = "密码不能为空";
} else if (values.pass.length < 8) {
  errors.pass = "密码长度不能少于8位";
}
// 确认密码校验
if (!values.pass_conf.trim()) {
  errors.pass_conf = "确认密码不能为空";
} else if (values.pass_conf !== values.pass) {
  errors.pass_conf = "两次输入的密码不一致";
}

5. 修正密码输入框的事件绑定 #

密码输入框你只绑定了onChange={confirm_ps}，没有绑定handleChange，会导致values里的pass值不会更新，要改成同时触发两个函数：

<input
  type="password"
  id="pass"
  name="pass"
  placeholder="Mote de pass"
  value={values.pass}
  onChange={(e) => {
    handleChange(e);
    confirm_ps(e);
  }}
/>

6. 修正提交按钮的type属性 #

按钮的type写成了submite，正确属性值是submit：

<button type="submit" className="signup-btn">
  S'INSCRIRE AND ACCEPTER
</button>

内容的提问来源于stack exchange，提问作者Abdessamad