React Native 传入state值到Axios post登录请求返回401错误求解

问题原因分析 #

• 不可见字符干扰：你肉眼判断内容一致不代表实际值完全相等，状态中存储的email或password大概率包含肉眼无法识别的特殊字符（如前后空格、换行符、制表符、零宽空格等），后端接口做严格字符串校验时会判定不匹配，返回401。
• 数据类型不匹配：状态中存储的email或password为非字符串类型（比如password误存为数字类型），硬编码的params2中两个字段均为字符串类型，后端接口严格校验参数类型时会判定参数非法。
• 取值时机不一致：你查看状态值的时机和handleSignin实际执行时的取值时机不匹配，比如你在开发者工具状态面板查看的是最终更新后的值，但handleSignin触发时状态还未完成异步更新，拿到的是旧的错误值。
• 拦截器逻辑差异：你的axios实例配置了全局拦截器，动态生成的params触发了拦截器的参数修改逻辑，硬编码的params2未触发对应逻辑，导致实际发送到后端的参数和预期不一致。

解决步骤 #

1. 首先确认参数实际差异，在发送请求前添加如下日志做严格比对：

const handleSignin = async () => {
  // 新增以下校验逻辑
  const isEmailEqual = email === 'abcd@gmail.com'
  const isPwdEqual = password === 'abcd'
  console.log('邮箱是否完全相等：', isEmailEqual)
  console.log('密码是否完全相等：', isPwdEqual)
  console.log('邮箱原始值：', JSON.stringify(email), '类型：', typeof email)
  console.log('密码原始值：', JSON.stringify(password), '类型：', typeof password)
  
  try {
    // 原有逻辑
  } catch (err) {
    console.error(err)
  }
}

如果打印的全等判断为false，说明值确实存在差异，优先排查输入环节的问题。
2. 对参数做标准化清洗，组装参数时自动去除首尾空白字符并统一转为字符串类型：

const params = {
  email: String(email).trim(),
  password: String(password).trim(),
}

3. 校验请求实际发送内容：打开浏览器开发者工具的「网络」面板，分别对比传params和params2时的请求头、请求体内容，确认是否有拦截器额外添加了修改参数的逻辑。
4. 调整事件触发时机：不要在setEmail/setPassword调用后同步执行handleSignin，如果需要在输入完成后自动触发登录逻辑，要通过useEffect监听对应状态变化后再执行。

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