MERN栈中服务端返回客户端时subDocument数据丢失求助

问题说明 #

在Node/Express服务端向React客户端传输数据时，出现子属性数据被莫名剥离的问题。应用内其他数据查询场景均能正常返回结果，仅当前Model关联子文档填充的场景出现异常。

服务端代码示例 #

const myData = await Model.find({ ...queryOptions }).populate({ path: 'subDocument' });

console.log( myData );

return res.status( 200 ).send({
  message: 'success',
  myData
});

服务端日志输出 #

[
  {
    "_id": 123,
    "title": "The Title",
    "subDocument": {
      "_id": 456,
      "title": "The Subdoc",
      "items": [ 1, 2, 3 ]
    }
  }
]

客户端代码示例 #

const response = await axios({
  method: 'get',
  url: '/path-to-api'
});

console.log( response.data );

客户端日志输出 #

{
  "message": "success",
  "myData": [
    {
      "_id": 123,
      "title": "The Title",
      "subDocument": {}
    }
  ]
}

关键信息 #

• 服务端调用res.send()前的日志已确认subDocument数据完整存在
• 客户端接收数据后日志显示该子文档丢失，两端无额外干扰代码
• 技术栈版本：
  • MongoDB v7.0.2
  • Express v4.18.2
  • React v18.2.0
  • Node v21.4.0

问题已解决 #

经排查，问题与React StrictMode的双重渲染机制相关（可能存在个人理解偏差）。修复方式如下：

1. 服务端将返回对象通过JSON.stringify()转换为字符串后发送
2. 客户端接收数据后使用JSON.parse()解析
3. 在子组件中结合useState和useEffect来保留数据

调整后应用已恢复正常。

内容的提问来源于stack exchange，提问作者Michael R. Wilson