点击HomeScreen商品跳转ProductScreen时出现JSON循环结构转换错误

Converting circular structure to JSON 报错的核心原因是代码尝试将存在循环引用的对象序列化为JSON格式，本次报错链指向MongoDB的NativeTopology实例，说明后端返回的产品数据携带了Mongoose的内部元对象，存在循环引用。

• 后端接口修复：在查询单条商品的MongoDB查询语句后添加.lean()方法，将Mongoose文档实例转换为无额外元属性的普通JavaScript对象，从根源上消除循环引用。参考后端接口代码：

// 后端商品详情接口示例
app.get('/api/products/:id', async (req, res) => {
  try {
    // 调用lean()返回纯业务数据对象
    const product = await Product.findById(req.params.id).lean()
    if (product) {
      res.json(product)
    } else {
      res.status(404).json({ message: '商品不存在' })
    }
  } catch (err) {
    res.status(500).json({ message: '服务器错误' })
  }
})

• 前端代码问题修复：
  1. ProductScreen.js 中Button组件的class属性改为React标准的className属性，避免DOM属性告警
  2. 商品描述渲染行多余的$符号删除，修改为Description: {product.description}
• 可选排查：如果使用了redux-persist做状态持久化，将productDetails切片从持久化名单中移除，避免序列化Redux状态时触发循环引用报错。

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