React使用Axios调用Express接口报Converting circular structure to JSON错误

该报错是Express返回响应执行JSON序列化时触发，根源出在你的Express路由代码逻辑上：

• Mongoose的findOne()是异步方法，你没有加await关键字等待查询完成，此时Room1变量存储的是Mongoose的Query实例对象，不是实际的文档查询结果
• Query实例内部包含数据库连接相关的循环引用结构，Express调用res.send()时会自动将返回值序列化为JSON，遇到循环引用就抛出了你看到的报错

首先修改Express端的路由代码，补充异步处理逻辑即可：

// 给路由处理函数加async关键字标识为异步函数
app.get('/roomBefore', async function(req,res){
  console.log(req.query);
  const id = req.query.id;
  try{
    // 加await等待数据库查询完成，拿到实际的文档结果
    const Room1 = await Room.findOne({_id: id});
    console.log(id);
    // 补充空值判断，处理查询不到对应数据的场景
    if(!Room1) return res.status(404).send({msg: '未查询到对应房间数据'});
    // 查询类请求建议用200状态码，201一般用于资源创建成功的场景
    res.status(200).send(Room1);
  } catch(err) {
    console.log(err);
    res.status(500).send({msg: '服务器查询错误'});
  }
})

额外优化建议 #

React端的定时器最好在组件卸载时主动清除，避免组件销毁后仍然发起请求造成内存泄漏，参考写法：

// React函数组件内示例
useEffect(() => {
  const timer = setInterval(()=>{ 
    axios.get(`http://localhost:8080/roomBefore`, {
      params: { id: '61522eca53996364cbd04348'}
    }).then((res) => {
      console.log(res.data);
    }).catch((err) => {
      console.log(err);
      console.log('On est dans lerreur du set');
    })
  }, 5000);
  // 组件卸载时清除定时器
  return () => clearInterval(timer);
}, [])

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