React+MySQL+NodeJS查询用户数报Objects are not valid as a React child错误怎么解决

报错根因 #

MySQL执行COUNT类聚合查询后，返回给后端的result是数组结构，数组内第一个元素是包含统计结果的对象，格式如下：

// 后端console.log(result)得到的结构示例
[ { 'COUNT(SSN)': 0 } ]

你直接把这个数组返回给前端，前端把数组/对象赋值给data1后直接放到JSX中渲染，React不支持直接渲染对象类型的值，就会触发当前报错。

解决方案 #

两种方案任选其一即可：

方案1：后端直接返回统计数值（推荐） #

修改后端/reports1接口逻辑，直接取出统计值返回，避免前端额外处理：

app.get("/reports1", (req, res) => {
   // 建议给统计字段起别名，后续取值更方便
   db.query("SELECT COUNT(SSN) AS user_count FROM usertype WHERE TypeID = 1 ", (err, result) => {
    if (err) {
      console.log(err)
      return res.status(500).send('查询失败')
    } 
    // 取出统计值直接返回数字
    const count = result[0].user_count
    res.send(count.toString())
  })
});

方案2：前端处理返回结果 #

如果不想修改后端代码，直接调整前端Axios请求的取值逻辑即可，同时要给useEffect补充空依赖数组，避免无限触发请求：

useEffect(() => {
  Axios
    .get("http://localhost:3003/reports1")
    .then(result => {
      // 取出数组第一个元素的统计值
      const count = result.data[0]['COUNT(SSN)']
      setData1(count)
    });
}, []); 

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