如何将Node.js API从SQL Server获取的数据渲染到React.js视图

核心错误点汇总 #

• 后端返回数据结构错误
• 前端fetch请求逻辑链断裂
• 前后端字段名不匹配
• 可选：若你漏写express服务启动监听代码也会导致本地接口无法访问

1. 修正后端数据库查询层代码 #

mssql的recordsets是查询结果集合的外层包装数组，单表查询的实际行数据存储在recordsets[0]中，修改返回值即可：

async function getRoles() {
      try {
          let pool = await sql.connect(/My Configuration Database/);
          let products = await pool.request().query("SELECT [id],[division] FROM [FMLX_IME].[dbo].[ime.tbl_roles]");
          // 仅返回实际业务数据，去掉外层recordsets包装
          return products.recordsets[0];
          }
      catch(error) {
           console.log(error);
          }
      }

2. 补全express服务启动代码（若缺失） #

你贴出的路由代码末尾缺少服务启动逻辑，加上确保本地服务正常运行在3001端口：

// 放在路由代码的最末尾
app.listen(PORT, () => {
  console.log(`后端服务已启动，端口：${PORT}`)
})

3. 修正前端fetch请求逻辑 #

原代码第一个then直接打印result.json()，没有返回对应的Promise，导致后续逻辑拿不到响应数据，同时去掉重复的res.json()调用：

componentDidMount() {
    fetch('http://localhost:3001/api/get-roles')
       .then(result => result.json()) // 先将响应转为json格式，返回该Promise
       .then(json => {
            console.log('接口返回数据：', json) // 可在此处确认数据结构是否符合预期
            this.setState({
                roles: json,
                isLoaded: true
            })
        }).catch((err) => {
             console.log('请求错误：', err);   
        });
}

4. 修正渲染字段匹配 #

你的SQL查询返回的是division字段，而非前端代码中写的role字段，修改render中的取值逻辑：

<li key={role.id}>
    ID: {role.id} || ROLE: {role.division}
</li>

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