React Native中JSON.stringify无法显示完整props对象问题求助

这问题我之前在开发React Native项目时也踩过坑！核心原因和JSON.stringify的工作机制，以及React Navigation的navigation对象结构直接相关，咱们来理清楚：

背后的原因 #

• 循环引用问题：React Navigation的navigation对象内部存在循环引用关系（比如navigation.navigator可能又反向引用了navigation本身）。而JSON.stringify在处理有循环引用的对象时，要么会跳过这些引用部分，要么直接报错，最终导致序列化后的结果里看不到navigation对象，甚至显示为undefined。
• 不可枚举属性：navigation对象的很多核心方法和属性是不可枚举的（比如navigate、goBack这些方法）。JSON.stringify默认只会序列化对象的可枚举属性，所以即使这些属性实际存在，也不会被转换到JSON字符串里。

解决办法 #

根据你的需求，这里有几个实用的方案：

1. 只序列化需要的具体属性
   如果你只关心navigation里的某些部分（比如route或者特定方法），可以手动提取这些属性再序列化，避开循环引用和不可枚举的问题：

   // 示例：只序列化route和navigate方法（方法转字符串展示）
   console.log(JSON.stringify({
     route: props.navigation.route,
     navigate: props.navigation.navigate.toString()
   }));
   

2. 自定义序列化函数处理循环引用
   写一个简单的递归函数，用WeakSet来跟踪已经处理过的对象，跳过循环引用的部分：

   const safeStringify = (obj) => {
     const seen = new WeakSet();
     return JSON.stringify(obj, (key, value) => {
       if (typeof value === 'object' && value !== null) {
         if (seen.has(value)) {
           return '[Circular Reference]'; // 标记循环引用，也可以直接return跳过
         }
         seen.add(value);
       }
       return value;
     });
   };
   
   // 使用这个函数来序列化props
   console.log(safeStringify(props));
   

3. 用React DevTools直接查看
   其实调试时最方便的方式是用React Native DevTools（或者Chrome DevTools的React面板），直接展开props就能看到navigation对象的所有属性和方法，完全不需要依赖JSON.stringify，还能实时查看对象的状态。

小提示 #

console.log(props)之所以能展示完整的navigation对象，是因为浏览器/调试器直接展示的是对象的实时引用，它会特殊处理循环引用，并且能访问到不可枚举的属性；而JSON.stringify是严格遵循JSON规范的，所以两者的表现差异是正常的。

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