在家里，我收到该错误：任何导航器均未处理有效负载为 {"params":{"company":"Marciello Resto 2"}} 的操作 'SET_PARAMS'

Question

我现在使用 React Native 导航 5，在我的“Home 组件中，我有一个 setParams 可以工作，但我收到了这个错误：

\n

\n

{"params":{"company":"Marciello Resto 2"}}“任何导航器都没有处理带有有效负载的‘SET_PARAMS’操作。”

\n

\n

我用的是安卓模拟器。

\n

感谢大家的帮助！

\n

//App.js\nimport * as React from "react"\nimport { View, Text, ActivityIndicator, StyleSheet } from 'react-native'\nimport { NavigationContainer } from '@react-navigation/native'\nimport { createStackNavigator } from '@react-navigation/stack'\nimport { createDrawerNavigator } from '@react-navigation/drawer'\nimport EtiquettesPictureContext from './Components/Contexts/EtiquettesPictureContext'\nimport RootStack from './Navigation/Navigation'\nimport Home from './Components/Layouts/Home'\nimport Etiquettes from './Components/Layouts/Etiquettes'\nimport TemperaturesFridges from './Components/Layouts/TemperaturesFridges'\nimport BonsLivraisons from './Components/Layouts/BonsLivraisons'\nimport EtiquettesTakePicture from "./Components/EtiquettesTakePicture"\nimport BonsLivraisonsTakePicture from "./Components/BonsLivraisonsTakePicture"\nimport DlcAlertTakePicture from "./Components/DlcAlertTakePicture"\nimport Notifications from "./Components/Layouts/Notifications"\nimport Settings from "./Components/Layouts/Settings"\nimport Welcome from "./Components/Layouts/Welcome"\nimport Login from "./Components/Layouts/Login"\nimport Signup from "./Components/Layouts/Signup"\nimport InitLogin from "./Components/Layouts/InitLogin"\nimport MesEtiquettes from "./Components/Layouts/MesEtiquettes"\nimport WhatRole from "./Components/WhatRole"\n\nconst AuthContext = React.createContext()\n\nconst Stack = createStackNavigator()\nconst Drawer = createDrawerNavigator()\n\nexport default function App({ navigation }) {\nconst [etiquettesPictureData, blPictureData, setEtiquettesPictureData, setBlPictureData] = React.useState("")\n\nupdateInitialData = (data) => {\nsetEtiquettesPictureData(data)\n}\n\nupdateBlData = (data) => {\nblPictureData(data)\n}\n\nconst [state, dispatch] = React.useReducer(\n(prevState, action) => {\nswitch (action.type) {\ncase 'RESTORE_TOKEN':\nreturn {\n...prevState,\nuserToken: action.isLogged,\nisLoading: false,\n};\ncase 'SIGN_IN':\nreturn {\n...prevState,\nisSignout: false,\nuserToken: action.isLogged,\n};\ncase 'SIGN_OUT':\nreturn {\n...prevState,\nisSignout: true,\nuserToken: null,\n};\n}\n},\n{\nisLoading: true,\nisSignout: false,\nuserToken: null,\n}\n);\n\nReact.useEffect(() => {\n// Fetch the token from storage then navigate to our appropriate place\nconst bootstrapAsync = async () => {\nlet isLogged;\ntry {\nisLogged = await InitLogin.initLogin()\n} catch (e) {\n// Restoring token failed\n}\n\n// After restoring token, we may need to validate it in production apps\n\n// This will switch to the App screen or Auth screen and this loading\n// screen will be unmounted and thrown away.\ndispatch({ type: 'RESTORE_TOKEN', isLogged: isLogged.logged });\n};\n\nbootstrapAsync();\n\n}, []);\n\nconst authContext = React.useMemo(\n() => ({\nsignIn: async data => {\n// In a production app, we need to send some data (usually username, password) to server and get a token\n// We will also need to handle errors if sign in failed\n// After getting token, we need to persist the token using AsyncStorage\n// In the example, we'll use a dummy token\n\ndispatch({ type: 'SIGN_IN', isLogged: 'dummy-auth-token' });\n},\nsignOut: () => dispatch({ type: 'SIGN_OUT' }),\nsignUp: async data => {\n// In a production app, we need to send user data to server and get a token\n// We will also need to handle errors if sign up failed\n// After getting token, we need to persist the token using `AsyncStorage`\n// In the example, we'll use a dummy token\n\ndispatch({ type: 'SIGN_IN', isLogged: 'dummy-auth-token' });\n},\n}),\n[]\n\n)\n\nif (state.isLoading) {\n// We haven't finished checking for the token yet\nreturn (\n<View style={[styles.container, styles.horizontal]}>\n\n\n)\n}\n\nfunction RootStackScreen() {\nreturn (\n<Stack.Navigator>\n{state.userToken == false ? (\n<>\n<Stack.Screen name="Welcome" component={Welcome} />\n<Stack.Screen name="Login" component={Login} />\n<Stack.Screen name="Signup" component={Signup} />\n</>\n\n) : (\n<>\n<Stack.Screen name="Home" component={Home} options={({ route }) => ({ title: route.params ? route.params.company : "" })} />\n<Stack.Screen name="Etiquettes" component={Etiquettes} />\n<Stack.Screen name="TemperaturesFridges" component={TemperaturesFridges} />\n</>\n)}\n</Stack.Navigator>\n)\n\n}\n\nfunction DrawerScreen() {\nreturn (\n<Drawer.Navigator>\n\n<Drawer.Screen name="TemperaturesFridges" component={TemperaturesFridges} />\n</Drawer.Navigator>\n)\n\n}\n\nreturn (\n<EtiquettesPictureContext.Provider\nvalue={{\netiquette: etiquettesPictureData,\nBl: blPictureData,\nupdateInitialData: updateInitialData,\nupdateBlData: updateBlData\n}}>\n<AuthContext.Provider value={authContext}>\n\n<Drawer.Navigator>\n<Drawer.Screen name="Home" component={RootStackScreen} />\n</Drawer.Navigator>\n\n</AuthContext.Provider>\n</EtiquettesPictureContext.Provider>\n)\n}\n\nconst styles = StyleSheet.create({\ncontainer: {\nflex: 1,\njustifyContent: 'center'\n},\nhorizontal: {\nflexDirection: 'row',\njustifyContent: 'space-around',\npadding: 10\n}\n})\n//Home.jsimport * as React from 'react';\nimport mainStyleSheet from "../../Themes/main.js"\nimport { MaterialHeaderButtons, Item} from '../HeaderButtons';\nimport Ionicons from 'react-native-vector-icons/FontAwesome5';\nimport Company from '../Entities/Company';\nimport Notification from '../Entities/Notification'\n\nimport {\nSafeAreaView,\nScrollView,\nView,\nText,\nTouchableHighlight\n} from 'react-native';\n\nexport default function Home({ navigation}) {\n\nReact.useEffect(() => {\nCompany.getCompany().then(company => {\nnavigation.setParams({ company })\n})\nthis.didBlurSubscription = navigation.addListener(\n'didFocus',\n() => {\nNotification.countNotifications()\n.then(resp => {\nnavigation.setParams({ notificationsCount: resp.length })\n})\n}\n)\n\n// returned function will be called on component unmount \nreturn () => {\nthis.didBlurSubscription()\n}\n\n}, [])\n\nconst { navigate} = navigation;\nreturn (\n\n\n\n<TouchableHighlight style={[mainStyleSheet.buttonHomeContainer, { marginTop: 0 }]} onPress={() => navigate('Etiquettes')} >\n\n<Ionicons name="tag" style={{ marginLeft: 20 }} color="white" size={30} />\nEtiquettes produits\n\n\n<TouchableHighlight style={mainStyleSheet.buttonHomeContainer} onPress={() => navigate('TemperaturesFridges')}>\n\n<Ionicons name="thermometer-quarter" style={{ marginLeft: 20 }} color="white" size={30} />\nRelev\xc3\xa9s de temp\xc3\xa9rature\n\n\n<TouchableHighlight style={mainStyleSheet.buttonHomeContainer} onPress={() => navigate('BonsLivraisons')}>\n\n<Ionicons name="file-invoice" style={{ marginLeft: 20 }} color="white" size={30} />\nBons de livraisons\n\n\n<TouchableHighlight style={mainStyleSheet.buttonHomeContainer} onPress={() => navigate('DownloadableDocuments')}>\n\n<Ionicons name="file-image" style={{ marginLeft: 20 }} color="white" size={30} />\nDocuments \xc3\xa0 t\xc3\xa9l\xc3\xa9charger\n\n)\n}\n

\n

Answer 1

navigation.setParams我相信这个问题与组件卸载时的调用有关。根据反应导航文档[0]，

setParams 方法让我们更新当前屏幕的参数 (route.params)

如果当前屏幕已经在卸载时setParams被调用时已经卸载，那么导航器将无法处理它是有道理的。重新设计你的逻辑，这样你就不会在模糊上设置参数。

[0] https://reactnavigation.org/docs/navigation-prop/#setparams