React前端调用Express接口无报错但不展示MySQL数据如何解决

问题排查与修复方案 #

• 1. React 侧未触发接口请求逻辑
  你定义了databaseList方法用来拉取后端数据，但没有在组件生命周期中调用该方法，请求从未发送自然不会拿到数据。在类组件中添加componentDidMount生命周期函数调用请求即可：

componentDidMount() {
  this.databaseList()
}

• 2. 接口路径不匹配
  你的Express路由定义在qb.js文件中，默认需要在Express入口文件中挂载该路由，常见的挂载写法是：

// Express 入口app.js中
const qbRouter = require('./routes/qb')
app.use('/qb', qbRouter)

如果是上述挂载方式，你的接口地址应该是/qb而非/，对应React侧fetch要修改为：

fetch("/qb")

如果确实要把qb路由挂载到根路径，也需要确认Express入口中写的是app.use('/', qbRouter)。

• 3. 字段大小写不匹配
  后端返回的字段是大写开头的Position，但React渲染时写的是小写开头的player.position，会导致该字段读取为undefined，修改为对应大小写即可：

<div key={player.ID}>Name: {player.Name} Position: {player.Position}</div>

• 4. 后端跨域配置缺失
  如果没有配置React代理，或者代理配置不生效，需要在Express侧添加跨域支持：

1. 安装cors依赖：npm install cors
2. 在Express入口文件中引入并使用：

const cors = require('cors')
app.use(cors())

• 5. 增加错误捕获方便排查
  给fetch逻辑添加错误捕获，方便定位请求失败的原因：

fetch("/qb")
.then(res => {
  console.log(res);
  return res.json()
})
.then(qb => {
  console.log(qb);
  this.setState({qb})
})
.catch(err => {
  console.log('请求出错：', err)
})

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