导航状态下的不可序列化值答案

【问题标题】：Non-serializable values in navigation state导航状态下的不可序列化值
【发布时间】：2021-07-24 11:08:25
【问题描述】：

我发现无法解决此警告。我将我的列表项作为参数传递给随后的导航屏幕“详细信息”，以便显示有关用户从列表中选择的字符串的信息。我知道我正在传递一个读取“params.coinID.$$typeof (Symbol(react.element))”的反应对象，但我无法找到传递此用户选择参数的正确方法。

        <SafeAreaView style ={styles.container}>
        <Text style ={styles.title}>New Hot Tokens</Text>
        <FlatList
        data={listItems}            
        renderItem={({item}) => <Text style={styles.item}
        onPress={() => {
              navigation.navigate('Details', {coinID: (item)
              }); 
            }}  
        >{`${item.key}`}</Text>}/>
        </SafeAreaView>
  );  
}

function DetailsScreen({route, navigation}) {

const { coinID } = route.params;

console.log(coinID.key)

const { loading: coinLoading, error, data: coinData } = useQuery(COIN_INFO, {
          variables: {
                  coinForQuery: coinID.key},
                  pollInterval: 15000,
                  fetchPolicy: 'network-only',
                  notifyOnNetworkStatusChange: true
  }
);

【问题讨论】：

为什么不将函数存储在导航的屏幕中并传递一些道具来调用它？可以分享一下我帮你解决问题的零食吗？
啊，因为我将用户从平面列表中所做的选择传递到下一个屏幕，所以它知道要呈现什么。除了导航友好的（项目）之外，我还有什么可以使用的吗？
对不起，如果没有零食复制，我什么都说不出来。

标签： react-native react-navigation react-native-flatlist

【解决方案1】：

在文档中引用：https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state

如果您不使用状态持久性或深度链接到接受参数中的函数的屏幕，则警告不会影响您，您可以放心地忽略它。要忽略警告，您可以使用YellowBox.ignoreWarnings。

但一般的解决方案（不使用Redux）是使用Context API 将数据存储在父组件中。

请按照本教程寻求帮助：https://dev.to/emeka/state-management-in-react-native-using-context-14no

【讨论】：

无意冒犯，但是将文档页面链接到我所描述的错误并不是很有帮助，特别是因为我描述了我是如何意识到我在传递对象的方式上做错了什么.
如果遇到需要提供不可序列化参数的问题怎么办？在这种情况下，您想出传递密钥是件好事。但是我在答案中提到的“一般答案”是使用上下文 api。