React导入userForm模块提示未找到对应导出的报错原因咨询

报错由ES模块导入导出语法不匹配直接导致：

• userForm.js文件末尾使用的是默认导出语法：export default useForm;，文件仅对外暴露默认导出项，不存在名为userForm的命名导出。
• 业务组件中使用的是命名导入语法：import { userForm } from '../form/userForm';，该写法会去目标文件中匹配名为userForm的命名导出，和现有导出规则完全不匹配，和错误提示中possible exports: default的描述完全一致。
• 额外注意：你定义的自定义Hook函数名本身是useForm，符合React自定义Hook必须以use开头的命名规范，导入时写的userForm本身也和实际函数名不匹配。

两种方案选其一即可，推荐使用第一种，符合React生态的命名惯例：

• 方案1：修改导入语句（推荐）
  把业务组件里的错误导入行替换为默认导入写法：

  // 替换原错误导入行 import { userForm } from '../form/userForm';
  import useForm from '../form/userForm';
  

  同步修改组件内调用Hook的代码，匹配导入的变量名：

  // 替换原调用行 const [values, errors, onChangeField, onChangeFileField, isValid] = userForm(initialValues);
  const [values, errors, onChangeField, onChangeFileField, isValid] = useForm(initialValues);
  

• 方案2：修改导出语句
  如果不想调整导入侧代码，可把userForm.js的默认导出改为命名导出：

  // 替换文件末尾原导出行 export default useForm;
  export { useForm as userForm };
  

  这种方案不需要改导入侧代码，但导出的Hook名不符合React自定义Hook的use开头命名规范，不推荐使用。

你在getErrors方法校验gender字段时，存在变量名拼写错误：

// 原错误代码
if ("gender" in inputValues) {
    newErrors.genero = ""; // 这里把gender拼成了genero
    // ...后续校验逻辑
}

该笔误会导致性别字段的校验错误无法正常在UI上显示，把newErrors.genero = ""修改为newErrors.gender = ""即可。

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