如何从Axios请求返回结果中获取对象内的userName与password字段

问题根因 #

你接口返回的 response.data 是用户对象数组，不是直接的单个用户对象，之前所有写法都错误地直接从数组上取userName等属性，自然拿不到对应值。

之前写法的核心错误 #

• 第一种：忽略response.data是数组的结构，直接取数组上不存在的userName属性
• 第二种：混淆了axios响应对象和接口返回数据，同时字段名大小写错误（一会写userName一会写全小写的username，字段名大小写敏感）
• 第三种：自行假设返回数据有外层status、user包装字段，和实际返回的纯数组结构不匹配

正确实现代码 #

按你提供的登录场景，参考实现如下：

axios.post('foo', {
  userName: values.email,
  password: values.password
}).then(response => {
  // 取到接口返回的用户数组
  const userList = response.data
  // 匹配账号密码一致的用户
  const validUser = userList.find(user => 
    user.userName === values.email && user.password === values.password
  )
  if (validUser) {
    // 校验通过跳转首页
    navigation.navigate("Home")
  } else {
    Alert.alert(
      "Warning!",
      "Please check your email or password", 
      [{ text: 'Ok' }]
    )
  }
}).catch(error => {
  console.warn(error.message)
})

注意事项 #

1. 字段名必须和返回结构严格保持大小写一致，你返回的字段是userName，不要写错为username
2. axios的then回调入参是完整的响应对象，接口返回的原始数据固定在.data属性下
3. 生产环境不要把全量用户的账号密码返回到前端做校验，登录校验逻辑必须放在服务端实现，避免数据泄露风险。

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