ReactJS中Axios获取JSON数据无法读取full_name等字段的问题

首先，问题出在你混淆了后端返回JSON的结构与Axios响应数据的层级关系。你能读取message字段说明后端返回的JSON结构大致如下：

{
  "message": "登录成功",
  "data": [
    {
      "full_name": "xxx",
      "username": "xxx"
    }
  ]
}

Axios会把后端返回的JSON直接放在响应对象的data属性里，所以：

• result.data.message 对应返回JSON中的message字段（这也是你能拿到它的原因）
• result.data.data 才是你要访问的用户数据数组，而不是直接用result.data.username

具体修正步骤： #

1. 先确认返回结构：在请求的then回调里打印完整响应数据，明确层级：

   axios.post('http://localhost/user/login', loginFormData)
     .then(result => {
       console.log('完整返回数据:', result.data);
     })
   

2. 正确访问数组内的字段：如果data是包含单个用户对象的数组，取数组第一个元素再访问字段：

   axios.post('http://localhost/user/login', loginFormData)
     .then(result => {
       console.log('登录提示:', result.data.message);
       // 检查data数组是否存在且不为空
       if (result.data.data && result.data.data.length > 0) {
         const user = result.data.data[0];
         console.log('用户名:', user.username);
         console.log('全名:', user.full_name);
       } else {
         console.log('未获取到用户数据');
       }
     })
     .catch(error => {
       console.error('登录请求失败:', error);
     })
   

3. 边界情况处理：增加数组为空或不存在的判断，避免代码抛出Cannot read properties of undefined错误。

如果后端返回的data不是数组而是单个对象（比如{message: "...", data: {full_name: "...", username: "..."}}），那直接访问result.data.data.username即可，无需数组下标。总之，打印完整返回数据是排查这类问题最直接的方式。

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