使用React状态实现Supabase注册时出现参数错误的问题

问题根源 #

Supabase Auth的signUp方法要求传入的参数必须包含email或phone字段（对应邮箱或手机号注册），但你代码里用了login作为键名，Supabase无法识别这个字段，所以抛出了必填项缺失的错误。另外表单提交的默认行为也可能导致请求异常。

修复步骤 #

1. 修正参数键名
   将state变量名从login改为email，确保传给signUp的参数是Supabase能识别的字段：

   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   
   const signUpSubmitted = (e) => {
     // 阻止表单默认提交刷新页面
     e.preventDefault()
     supabase.auth
       .signUp({ email, password })
       .then((response) => {
         response.error ? alert(response.error.message) : setToken(response)
       })
       .catch((err) => { alert(err)})
   }
   

2. 修复表单提交逻辑
   把提交事件绑定到<form>的onSubmit属性上，而不是按钮的onClick，同时确保阻止默认行为：

   <form id='sign-up' onSubmit={signUpSubmitted}>
     <h3>Sign Up</h3>
     <label>Email:</label>
     <input 
       type='email' 
       value={email}
       onChange={(e) => setEmail(e.target.value)}
     />
     
     <label>Password:</label>
     <input 
       type='password'
       value={password}
       onChange={(e) => setPassword(e.target.value)} 
     />
   
     <input type='submit' value="Sign Up"/>
   </form>
   

补充说明 #

• 确认输入的邮箱格式正确，type='email'会自动做基础校验，但也可以在提交前手动验证email是否为空或格式合法。
• 如果是手机号注册，只需把email替换成phone，并对应修改输入框的type为tel即可。

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