JS查询数据库数据映射为对象数组接口报错如何排查

前后端接口路径完全不匹配是本次报错的直接诱因，错误触发逻辑为：请求打到不存在的接口返回404响应，响应体不是预期的JSON数组，后续调用.map()方法遍历时报类型错误，具体问题点和修复方案如下：

核心问题点 #

• 前后端接口路径不一致：后端定义的玩家查询接口路径为/api/players，但前端发起请求的地址拼接的是users路径，无法命中正确接口。
• 存在冗余代码：数据访问层已经完成数据库行到目标JS对象的字段映射，前端API层重复做了一次相同的字段转换，无实际作用；服务端接口回调多余标记了async关键字，内部没有异步等待逻辑。
• 前端调用时机错误：App.js中直接在组件作用域调用数据请求方法，组件每次重渲染都会重复触发接口请求，浪费性能。
• SQL查询可优化：现有DAO层使用SELECT *查询全表字段，实际只需要id、name、rank三个字段，查询多余字段会增加数据库开销。

修复步骤 #

1. 修正前端API层请求逻辑 #

调整请求路径和后端接口对齐，删除冗余的字段映射代码：

// API.js 修复后代码
const getPlayers = async () => {
  // 注意SERVER_URL的配置：
  // 如果SERVER_URL是接口前缀地址（例如http://localhost:3000/api/），则路径写'players'即可
  // 如果SERVER_URL是服务根地址（例如http://localhost:3000/），则路径写'api/players'
  return getJson(
     fetch(SERVER_URL + 'players', { credentials: 'include'})
  )
}

2. 精简服务端接口代码 #

服务端接口路径保持和前端一致，去掉多余的async标记即可，原有逻辑无需大改：

// server.js 修复后代码
app.get('/api/players', (req, res) => {
  riddleDao.getPlayers()
    .then(players => {
        res.json(players)
    })
    .catch((err) => res.status(500).json(err));
});

3. 优化DAO层数据查询逻辑 #

SQL语句改为查询指定字段，删除冗余的字段映射代码：

// DataAccessObject.js 修复后代码
exports.getPlayers = () => {
  return new Promise((resolve, reject) => {
    // 直接查询需要的三个字段，不需要再手动映射
    const sql = 'SELECT id, name, rank FROM users';
    db.all(sql, [], (err, rows) => {
      if (err) {
        reject(err);
        return;
      }
      resolve(rows);
    });
  });
};

4. 调整前端请求调用时机 #

如果是React类项目，将数据请求放到useEffect钩子中，避免重复触发请求：

// App.js 修复后代码
import { useEffect, useState } from 'react';

function App() {
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const playerList = await API.getPlayers();
      setPlayers(playerList);
    }
    fetchData();
    // 空依赖数组表示仅在组件挂载时执行一次请求
  }, []);

  // 页面渲染逻辑省略
}

验证方式 #

修复完成后重启前后端服务，打开浏览器开发者工具的网络面板，确认玩家查询接口返回200状态码，响应内容为标准对象数组，每个元素包含id、name、rank三个字段即可。

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