React Native中如何将存储组件的状态传递至其他屏幕？解决循环结构JSON对象报错

这个问题我之前也碰到过，原因其实很直接：React Navigation在传递路由参数时，会默认对参数执行JSON序列化操作，而你存在inState里的是React元素实例（比如<View />、<StatusBoxComponent />），这些元素内部包含循环引用的结构（比如组件的props上下文、内部状态关联的对象），JSON.stringify根本无法处理这种循环依赖，所以就抛出了TypeError: cyclical structure in JSON object的错误。

正确的解决方案：传递数据，而非React元素 #

React的核心是数据驱动UI，我们应该把要展示的数据传递到目标屏幕，再在目标屏幕里根据数据渲染组件，而不是直接传递已经创建好的React元素。具体修改步骤如下：

1. 修改原屏幕的状态，存储数据而非元素
   把原来存储React元素的数组，改成存储纯数据对象的数组：

   // 原屏幕初始化状态：空数组，不再存<View />
   const [inState, setInState] = useState([]);
   
   // 更新点击事件，存储数据对象
   const breakOutClick = () => {
     setInState([
       ...inState,
       {
         status: 'Break-Out',
         time: time,
         isCheckOut: true
       }
     ]);
   };
   
   const breakInClick = () => {
     setInState([
       ...inState,
       {
         status: 'Break-In',
         time: time,
         isCheckOut: true
       }
     ]);
   };
   

2. 原屏幕依然正常渲染组件
   在原屏幕里，遍历数据数组渲染对应的组件（记得加key避免React警告）：

   <View>
     {inState.map((item, index) => (
       <StatusBoxComponent 
         key={index}
         ImageConfigIconCheckOut={item.isCheckOut} 
         status={item.status} 
         time={item.time} 
       />
     ))}
   </View>
   

3. 传递数据参数到目标屏幕
   路由导航时，直接传递这个纯数据数组：

   props.navigation.navigate('ChartScreen', { inState: inState });
   

4. 目标屏幕接收数据并渲染组件
   在ChartScreen里，拿到数据后遍历渲染组件：

   const ChartScreen = (props: any) => {
     const { inState } = props.route.params;
     return (
       <View style={styles.screen}>
         {inState.map((item, index) => (
           <StatusBoxComponent 
             key={index}
             ImageConfigIconCheckOut={item.isCheckOut} 
             status={item.status} 
             time={item.time} 
           />
         ))}
       </View>
     );
   };
   

为什么这种方式可行？ #

纯数据对象（字符串、数字、普通对象/数组）不包含循环引用，能被JSON正常序列化和反序列化，完全符合React Navigation的参数传递规则。同时这种方式也更贴合React的设计模式，数据和UI渲染分离，后续维护和修改也更灵活。

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