React项目中使用Pocketbase修改用户邮箱报错问题求助

问题现象 #

使用Pocketbase修改用户邮箱时，输入当前正在使用的邮箱能正常提交，输入新邮箱则触发ClientResponseError 400错误。

排查与解决步骤 #

1. 检查邮箱字段的唯一性约束
   登录Pocketbase后台，进入users集合的字段设置，确认email字段是否开启了唯一索引。如果新邮箱已经被其他用户注册，后台会直接返回400错误。

2. 确认修改邮箱的身份验证要求
   Pocketbase默认修改敏感信息（如邮箱）需要验证用户当前身份，仅传新邮箱会被拒绝。需要在表单中添加当前密码输入框，将密码与新邮箱一起提交：

• 调整表单：

  <form onSubmit={handleSubmit(onSubmit)}>
    <div className="form-group">
      <label htmlFor="email">新邮箱</label>
      <input type="email" defaultValue={pb.authStore.model.email} className="form-control" id="email" {...register("email")} />
    </div>
    <div className="form-group">
      <label htmlFor="password">当前密码</label>
      <input type="password" className="form-control" id="password" {...register("password", { required: true })} />
    </div>
    <button type="submit" className="btn btn-blue">更新</button>
  </form>
  

• 修改更新函数（注意字段名需匹配Pocketbase版本，部分版本用password而非currentPassword）：

  const changeEmail = async (data) => {
    try {
      const updateData = {
        email: data.email,
        currentPassword: data.password
      };
      const record = await pb.collection('users').update(pb.authStore.model.id, updateData);
      toast.success("邮箱修改成功");
      pb.authStore.save(record.token, record); // 更新缓存的用户信息
    } catch (e) {
      console.error(e);
      toast.error(e.message || "修改邮箱失败");
    }
  }
  

3. 查看Pocketbase后台详细日志
   400的模糊提示参考价值低，直接去Pocketbase Admin面板的Logs页面，找到对应错误记录，里面会显示具体原因（如邮箱已存在、缺少验证信息、格式错误等）。

4. 验证前端提交的数据格式
   在changeEmail函数开头打印console.log(data)，确认邮箱格式合法，没有多余空格或非法字符。

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