React中调用emailValidator函数抛出‘is not a function’异常求助

我写了一个可复用的emailValidator函数，打算在应用的多个区域使用。将它导入到Contact.js后，通过const email_validator = emailValidator(form)传入表单字段值调用，结果出现了错误。

错误信息 #

TypeError: emailValidator is not a function

emailValidator.js 代码 #

export default function emailValidator(form){
    let Response = {status: true, message: ''}
    const namePattern = /^[A-Za-z ]+$/;
    const emailPattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
    if(form.name.length < 1 || form.email.length < 1 || form.email.length < 1){
        Response.status = false
        Response.message = 'All the fields are required.'
    } else if(form.name.length < 3){
        Response.status = false
        Response.message = 'The name field cannot be less than 3 characters.'
    }
    // ... 其他验证逻辑
    return Response
}

Contact.js 代码 #

import { useState } from 'react'
import { emailValidator } from '../../components/emailValidator/emailValidator'

export default function Contact() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  const onSubmit = (e) => {
    e.preventDefault()
    const form = {"name": name, "email": email, "message": message}
    const email_validator = emailValidator(form)
    console.log(email_validator)
  }
  return (...);
}

问题原因及解决方法 #

问题出在导出与导入方式不匹配：

• emailValidator.js使用的是export default默认导出
• 但Contact.js里用了import { emailValidator }这种命名导入语法

两种解决方式任选其一：

1. 调整导入方式为默认导入：

// Contact.js 中的导入语句修改为
import emailValidator from '../../components/emailValidator/emailValidator'

2. 或者调整导出方式为命名导出：

// emailValidator.js 中的函数导出修改为
export function emailValidator(form){
    // ... 原函数逻辑不变
}

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