React Navigation导航状态不可序列化值告警问题求助

• React Navigation的路由参数要求必须是可序列化的JSON类型（仅支持字符串、数字、布尔、纯对象、数组，不能包含Symbol、函数、React元素等特殊类型），否则就会触发你遇到的不可序列化告警
• 你当前直接把整个item对象作为参数传递，若listItems的元素本身包含React节点属性，就会携带$$typeof: Symbol(react.element)这个不可序列化字段，导致告警触发
• 你的详情页实际仅需要用到item.key作为查询入参，完全不需要传递整个item对象，调整后就能彻底解决问题

第一步：修改列表页传参逻辑 #

仅传递需要的基础类型参数，不要传递完整item对象：

<SafeAreaView style ={styles.container}>
<Text style ={styles.title}>New Hot Tokens</Text>
<FlatList
data={listItems}            
renderItem={({item}) => <Text style={styles.item}
onPress={() => {
      // 仅传递字符串/数字类型的key，属于可序列化的标准JSON类型
      navigation.navigate('Details', { coinKey: item.key }); 
    }}  
>{`${item.key}`}</Text>}/>
</SafeAreaView>
  );  
}

第二步：修改详情页接收逻辑 #

直接接收传递的基础类型参数使用即可：

function DetailsScreen({route, navigation}) {
// 直接接收纯数据类型的参数
const { coinKey } = route.params;
console.log(coinKey)
const { loading: coinLoading, error, data: coinData } = useQuery(COIN_INFO, {
          variables: {
                  coinForQuery: coinKey},
                  pollInterval: 15000,
                  fetchPolicy: 'network-only',
                  notifyOnNetworkStatusChange: true
  }
);

如果确实需要传递多个字段，建议单独挑取所有需要的基础类型字段传递，不要直接传入完整item对象；如果你的listItems本身不是纯数据数组，而是包含React元素的数组，需要先把数据层和渲染层拆分，单独维护纯数据的列表数组用于渲染和传参。

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