React无法从服务器获取数据：CRUD应用客户端数据获取问题

问题核心 #

服务器端GET /users接口日志显示已成功返回数据，但客户端通过Axios请求后response.data为undefined。

排查步骤与修复方案 #

1. 给客户端请求添加错误捕获 #

先排查请求是否实际失败（比如网络错误、隐性跨域问题），修改getUsers函数，补充错误处理逻辑：

const getUsers = () => {
  Axios.get('http://localhost:3001/users')
    .then((response) => {
      console.log('完整响应对象:', response);
      console.log('响应数据:', response.data);
      setUsersList(response.data);
    })
    .catch((error) => {
      console.error('请求失败详情:', error);
      if (error.response) {
        console.error('服务器错误状态:', error.response.status);
        console.error('服务器错误数据:', error.response.data);
      }
    });
};

通过控制台输出的错误信息，可直接定位是请求失败还是数据解析异常。

2. 服务器端改用res.json()返回数据 #

虽然res.send(result)会自动将对象转为JSON，但显式使用res.json()能确保响应头的Content-Type正确设置为application/json，避免客户端解析异常：

修改服务器端GET /users接口：

app.get("/users", (req, res) => {
    db.query("SELECT * FROM users", (err, result) => {
        if (err) {
            console.log(err);
            res.status(500).json({ error: err.message });
        } else {
            res.json(result); // 替换原res.send(result)
            console.log(result);
            console.log('success sending data');
        }
    });
});

3. 验证Axios导入与配置 #

确认客户端正确安装并导入Axios：

• 确保已执行npm install axios
• 导入语句保持规范（大小写不影响默认导入，但建议统一）：

import axios from 'axios';

4. 尝试React代理配置（可选） #

如果React运行在默认3000端口，服务器在3001端口，可在React项目的package.json中添加代理配置，规避跨域相关隐性问题：

"proxy": "http://localhost:3001"

之后客户端请求可简化为Axios.get('/users')

额外注意点 #

• 确认数据库users表中存在有效数据，服务器端console.log(result)需输出非空数组
• 客户端JSX中的<、>是粘贴时的转义字符，实际代码中需替换为正常的<、>，否则会导致渲染异常

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