React集成Firebase登录报邮箱格式错误，使用trim()仍未解决

故障根因 #

你的邮箱输入框没有和组件内声明的email状态做双向绑定，触发登录提交时，传入signInWithEmailAndPassword方法的email始终是初始化的空字符串，空值不符合Firebase要求的邮箱格式，因此触发报错。你之前尝试加trim()去空格没有生效，本质是因为根本没拿到用户输入的邮箱内容，和首尾空格、Firebase后台数据是否存在没有关系。

具体代码问题 #

• 邮箱、密码两个输入框均未绑定value属性对应状态，也未绑定onChange事件同步用户输入，导致状态值始终为初始空值
• import代码块中混入了markdown格式的图片引用语句[![Screen Shot for the error message][1]][1]，属于无效JS代码，需删除避免编译异常

修复方案 #

给两个输入框补充双向绑定逻辑即可：

1. 修改邮箱输入框代码，绑定value和onChange：

<input
  className="input"
  type="email"
  name="email"
  placeholder='john123@gmail.com'
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

2. 修改密码输入框代码，绑定value和onChange：

<input
  className="input"
  type="password"
  id="lname"
  name="password"
  placeholder=''
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

验证方式 #

可以在handleLogin方法调用Firebase登录接口前，加一行打印日志确认传参正确：

const handleLogin=(e)=>{
  e.preventDefault()
  // 加下面这行调试，确认能拿到输入的邮箱和密码
  console.log('提交参数：', email.trim(), password)
  firebase.auth().signInWithEmailAndPassword(email.trim(),password)
  .then(()=>{
    alert('LoggedIn')
    history.push("/")
  })
  .catch((error)=>{
    alert(error.message)
  })
}

控制台能正常打印出你输入的完整邮箱地址后，再触发登录就不会再报邮箱格式错误。

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