React+Node.js渲染SQL Server数据失败，寻求解决方法

核心问题分析 #

从代码和错误截图来看，核心问题是后端返回的是mssql库的完整查询结果对象，而非直接的用户数据数组，前端直接对该对象调用map方法会触发报错（对象不具备map方法）。mssql执行查询后，实际用户数据存储在result.recordset字段中。

后端代码修正 #

修改查询逻辑，确保只返回实际数据数组，并完善错误处理：

async function executeQuery() {
  try {
    const pool = await sql.connect(config);
    // 建议将数据库名称配置到config的database字段，避免每次查询切换库
    const result = await pool
      .request()
      .query(`SELECT TOP 10 UserNo FROM UserTable`);
    // 返回实际数据集，而非完整result对象
    return result.recordset;
  } catch (err) {
    console.error(err);
    // 抛出错误让接口层捕获，避免返回undefined
    throw err;
  }
}

app.get("/api/data", async (req, res) => {
  try {
    const result = await executeQuery();
    res.json(result);
  } catch (err) {
    // 向前端返回错误状态与信息
    res.status(500).json({ error: err.message });
  }
});

补充：将数据库Account直接配置到连接参数中，示例如下：

const config = {
  user: '你的用户名',
  password: '你的密码',
  server: '数据库服务器地址',
  database: 'Account', // 直接指定目标库
  options: {
    encrypt: true,
    trustServerCertificate: true
  }
}

前端代码修正 #

添加错误处理与加载状态，避免数据异常时渲染报错：

import React, { useState, useEffect } from "react";

function SqlTest() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  async function fetchData() {
    try {
      const res = await fetch("/api/data");
      if (!res.ok) {
        throw new Error(`请求失败：${res.status}`);
      }
      const result = await res.json();
      setData(result);
    } catch (err) {
      setError(err.message);
      console.error(err);
    }
  }

  useEffect(() => {
    fetchData();
  }, []);

  if (error) {
    return <div>加载失败：{error}</div>;
  }

  if (data.length === 0) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {data.map((item) => (
        <div key={item.UserNo}>{item.UserNo}</div>
      ))}
    </div>
  );
}

export default SqlTest;

调试建议 #

1. 直接访问/api/data接口，确认返回的是纯数组格式的JSON
2. 检查后端控制台，确认是否存在数据库连接或查询语法错误
3. 核实UserTable表存在，且UserNo字段名称拼写正确

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