[英]Expo: Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'props.navigation')]
I have been working on React Native and I am getting this error any help will be appreciable!我一直在研究 React Native,我收到了这个错误,任何帮助都会很明显!
My App.js Screen我的 App.js 屏幕
import React,{useEffect,useState} from "react"; import { NavigationContainer } from "@react-navigation/native"; import AppNavigator from "./navigation/AppNavigator"; export default function App() { return ( <NavigationContainer> <AppNavigator /> </NavigationContainer> ); }
My HomeScreen.js Screen我的 HomeScreen.js 屏幕
import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, ActivityIndicator, Image,View,Text } from 'react-native'; import { Button, TextInput } from 'react-native-paper'; import AsyncStorage from '@react-native-async-storage/async-storage'; // <View style={styles.container}> const HomeScreen=(props)=> { const logout =(props)=>{ AsyncStorage.removeItem("token").then(()=>{ props.navigation.replace("login") }) } return ( <View style={styles.container}> <Text> Your Email is XYZ </Text> <Button style={styles.btnStyle} mode="contained" onPress={() => logout()} > LOG OUT </Button> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', fontSize:18, justifyContent: 'center', }, btnStyle: { marginLeft: 18, marginRight: 18, marginTop: 30, backgroundColor: "black", textShadowColor: "white", borderRadius: 35, }, }); export default HomeScreen;
My AppNavigator.js我的 AppNavigator.js
import React, { useEffect, useState } from "react"; import { createStackNavigator } from "@react-navigation/stack"; import SignUp from "../screens/SignupScreen"; import LoginScreen from "../screens/LoginScreen"; import LoadingScreen from "../screens/LoadingScreen"; import HomeScreen from "../screens/HomeScreen"; import AsyncStorage from '@react-native-async-storage/async-storage'; const Stack = createStackNavigator(); function AppNavigator() { const [isLoggedin, setLogged] = useState(null) useEffect(() => { const token = AsyncStorage.getItem('token') if (token) { setLogged(true) } else { setLogged(false) } }, []) return ( <Stack.Navigator headerMode="none" screenOptions={{ headerStyle: { elevation: 0 }, cardStyle: { backgroundColor: '#fff' } }} > <Stack.Screen name="loading" component={LoadingScreen}></Stack.Screen> <Stack.Screen name="home" component={HomeScreen}></Stack.Screen> <Stack.Screen name="login" component={LoginScreen}></Stack.Screen> <Stack.Screen name="signup" component={SignUp}></Stack.Screen> </Stack.Navigator> ); } export default AppNavigator;
The error I am getting is我得到的错误是
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'props.navigation')] at screens\HomeScreen.js:9:8 in logout at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0 at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard at node_modules\react-native\Libraries\BatchedBridge\MessageQueue [未处理的 promise 拒绝:TypeError: undefined is not an object(评估'props.navigation')]在screens\HomeScreen.js:9:8 注销node_modules\react-native\node_modules\promise\setim: 37:13 在 node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 在 node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 在 setImmediate$argument_0 中的 tryCallOne _callTimer at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmedates at node_modules\react- native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmedates at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0 at node_modules\react-native\Libraries\BatchedBridge\MessageQueue. js:364:10 在 __guard 在 node_modules\react-native\Libraries\BatchedBridge\MessageQueue .js:134:4 in flushedQueue at [native code]:null in flushedQueue at [native code]:null in invokeCallbackAndReturnFlushedQueue
.js:134:4 influshedQueue at [native code]:null in flushedQueue at [native code]:null in invokeCallbackAndReturnFlushedQueue
Your Stack.screens are not wrapped with NavigationContainer and navigation props is not passed down to your screens/components.您的 Stack.screens 没有使用 NavigationContainer 包装,并且导航道具不会传递给您的屏幕/组件。
Please check https://reactnavigation.org/docs/hello-react-navigation请检查https://reactnavigation.org/docs/hello-react-navigation
return (
<NavigationContainer>
<Stack.Navigator
headerMode="none"
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: '#fff' }
}}>
<Stack.Screen name="signup" component={SignUp}></Stack.Screen>
.....
</Stack.Navigator>
<NavigationContainer>
);
In your HomeScreen.js
change your Logout function to this -在您的
HomeScreen.js
中,将您的 Logout function 更改为 -
const logout = () => { // You were passing a props variable here that was undefined..
AsyncStorage.removeItem('token').then(() => {
props.navigation.replace('login');
});
};
Check out this Snack that I created... Just to show you the implementation看看我创建的这个Snack... 只是为了向您展示实现
I would also suggest you to not restore token in your AppNavigator.js
.我还建议您不要在
AppNavigator.js
中恢复令牌。 Instead you should install expo-app-loading
and restore your token inside your App.js
相反,您应该安装
expo-app-loading
并在App.js
恢复您的令牌
And also, its not a good practice to perform async
operations inside a useEffect
.. Check out the Snack
link above for how you should implement it.. I've created a somewhat clone of it..Have a look而且,在
useEffect
中执行async
操作不是一个好习惯。查看上面的Snack
链接了解您应该如何实现它。我已经创建了它的一些克隆。看看
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.