React中使用Axios无法展示MySQL查询结果的问题排查

核心问题：后端响应方式错误 #

你的后端代码中使用了res.sendStatus(200).json({ result: result })，这是错误写法：

• sendStatus(200)会立即发送状态码为200的响应，响应体是字符串"OK"，同时结束整个响应流程。
• 后续链式调用的.json(...)完全不会执行，导致前端Axios接收到的不是预期的包含学生数组的JSON对象，而是字符串"OK"。

修复步骤 #

1. 修正后端代码 #

将控制器函数中的响应逻辑修改为res.status(200).json({ result: result })，同时新增数据库查询的错误处理：

const getAllStudents = (req, res) => {
  const selectAll = "SELECT * FROM students";

  studentDB.query(selectAll, (err, result) => {
    if (err) {
      return res.status(500).json({ error: err.message });
    }
    res.status(200).json({ result: result });
  });
};

• status(200)仅设置响应状态码，不会终止响应流程，后续的.json()可以正常发送包含学生数据的JSON结构。
• 新增错误处理逻辑，避免数据库查询失败时前端无有效响应。

2. 前端代码优化（可选） #

虽然前端渲染逻辑本身无问题，但可以增加数据合法性校验，避免后端返回异常数据时引发渲染错误：

const handleSearch = async () => {
  try {
    const { data } = await Axios.get("http://localhost:3500/students");
    if (Array.isArray(data?.result)) {
      setStudentResult(data.result);
    } else {
      console.error("后端返回数据格式异常");
      setStudentResult([]);
    }
  } catch (error) {
    console.error("获取学生数据失败：", error);
    setStudentResult([]);
  }
};

错误根源解释 #

当后端返回字符串"OK"时，前端解构const { result } = data会得到result = undefined，此时setStudentResult(undefined)会导致后续studentResult.map(...)抛出异常。修复后端响应方式后，前端能正确拿到学生对象数组，渲染时仅输出字符串类型的firstName，就不会再出现"对象不能作为React子元素"的错误。

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