如何修复可能的未处理承诺拒绝（id：0）？以及如何修复无法读取未定义的属性“导航”？
Posted
技术标签:
【中文标题】如何修复可能的未处理承诺拒绝（id：0）？以及如何修复无法读取未定义的属性“导航”？【英文标题】：How to fix Possible Unhandled Promise Rejection (id: 0)? and How to fix Cannot read property 'navigate' of undefined? 【发布时间】：2019-08-11 05:17:07 【问题描述】：我想创建登录面板。但是当我提交表单时，问题就出现了。
//App.js
import React, Component from 'react';
enter code here
import AsyncStorage, View, Image, TouchableOpacity from 'react-native';
import
createDrawerNavigator,
createStackNavigator,
createAppContainer,
createSwitchNavigator,
from 'react-navigation';
import Screen1 from './App/Components/Screen1';
import Screen2 from './App/Components/Screen2';
import Screen3 from './App/Components/Screen3';
import Screen4 from './App/Components/Screen4';
class NavigationDrawerStructure extends Component
constructor(props)
super(props);
this.__loadData();
__loadData = async() =>
const navigate = this.props.navigation;
const isLoggedIn = await AsyncStorage.getItem('isLoggedIn');
if(isLoggedIn === '1')
this.props.navigation.navigate('Auth');
else
this.props.navigation.navigate('App');
toggleDrawer = () =>
this.props.navigationProps.toggleDrawer();
;
render()
return (
<View style= flexDirection: 'row' >
<TouchableOpacity onPress=this.toggleDrawer.bind(this)>
<Image
source=require('./image/drawer.png')
style= width: 30, height: 30, marginLeft: 6
/>
</TouchableOpacity>
</View>
);
const FirstActivity_StackNavigator = createStackNavigator(
First:
screen: Screen1,
navigationOptions:
header: null,
,
,
);
const Screen2_StackNavigator = createStackNavigator(
Second:
screen: Screen2,
navigationOptions: ( navigation ) => (
title: 'Demo Screen 2',
headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
headerStyle:
backgroundColor: '#f00',
,
headerTintColor: '#fff',
),
,
);
const Screen3_StackNavigator = createStackNavigator(
Third:
screen: Screen3,
navigationOptions: ( navigation ) => (
title: 'Demo Screen 3',
headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
headerStyle:
backgroundColor: '#f00',
,
headerTintColor: '#fff',
),
,
);
const Screen4_StackNavigator = createStackNavigator(
Third:
screen: Screen4,
navigationOptions: ( navigation ) => (
title: 'Demo Screen 4',
headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
headerStyle:
backgroundColor: '#f00',
,
headerTintColor: '#fff',
),
,
);
const DrawerNavigatorExample = createDrawerNavigator(
Screen1:
screen: FirstActivity_StackNavigator,
navigationOptions:
drawerLabel: () => null,
,
,
Screen2:
screen: Screen2_StackNavigator,
navigationOptions:
drawerLabel: 'Demo Screen 2',
,
,
Screen3:
screen: Screen3_StackNavigator,
navigationOptions:
drawerLabel: 'Demo Screen 3',
,
,
Screen4:
screen: Screen4_StackNavigator,
navigationOptions:
drawerLabel: 'Demo Screen 4',
,
,
);
//export default createAppContainer(DrawerNavigatorExample);
export default createAppContainer(createSwitchNavigator(
AuthLoading:DrawerNavigatorExample,
App:Screen2_StackNavigator,
Auth:FirstActivity_StackNavigator,
,
initialRouteName:'AuthLoading',
));
import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import
AsyncStorage,
ActivityIndicator,
StyleSheet,
Text,
View,
Image
from 'react-native';
import Button, Input from 'react-native-elements';
const user_info = user:'admin',password:'123456'
export default class Screen1 extends React.Component
constructor(props)
super(props);
this.state =
user: '',
password:''
;
loginSubmit = async () =>
const navigate = this.props.navigation;
if(user_info.user === this.state.user && user_info.password === this.state.password)
await AsyncStorage.setItem('isLoading','1')
navigate('Screen2');
else
alert('Username or password is incorrent')
render()
return (
<View style=styles.container>
<View style=styles.loginform>
<Image style=styles.logo source=require('../../image/emllogo.png') />
<View style=styles.formarea>
<Input
onChangeText=(user)=>this.setState(user)
style=styles.inputtext
placeholder='Input User Name'
leftIcon=
<Icon
name='user'
size=20
/>
/>
</View>
<View style=styles.formarea>
<Input
secureTextEntry=true
onChangeText=(password)=>this.setState(password)
style=styles.inputtext
placeholder='Password'
leftIcon=
<Icon
name='lock'
size=20
/>
/>
</View>
<View style=styles.formarea>
<Button
buttonStyle=
backgroundColor:'red'
title="Login"
onPress=this.loginSubmit
/>
</View>
</View>
</View>
);
const styles = StyleSheet.create(
container:
flex:1,
backgroundColor:'#f00',
justifyContent:'center',
alignItems: 'center'
,
loginform:
width:'80%',
minHeight:'50%',
borderWidth:0.5,
backgroundColor:'#fff',
color:'#000',
borderRadius:10,
alignItems: 'center'
,
logo:
marginTop:'8%'
,
bordertopgray:
borderTopColor:'#ccc',
borderTopWidth:0.5,
width:'100%'
,
formarea:
width:'80%',
height:'8%',
marginTop:20
);
【问题讨论】：
你需要绑定 loginSubmitonPress=this.loginSubmit.bind(this)
不工作。仍然显示此警告。
@aseferov 相同的警告。
【参考方案1】：
如下尝试
loginSubmit = () =>
const user, password = this.state;
const navigate = this.props.navigation;
if(user_info.user === user && user_info.password === password)
AsyncStorage.setItem('isLoading', '1')
.then(() => navigate('Screen2'))
else
alert('Username or password is incorrent')
;
【讨论】：
感谢您的回复。但很抱歉，它仍然显示该警告。 @ZilonJakir 尝试在构造函数中打印出 this.props.navigation以上是关于如何修复可能的未处理承诺拒绝（id：0）？以及如何修复无法读取未定义的属性“导航”？的主要内容，如果未能解决你的问题，请参考以下文章
可能的未处理承诺拒绝（id：0）：错误：权限被拒绝（通过“CameraRoll.saveToCameraRoll（）”保存图像时）
*可能的未处理承诺拒绝（id：0）：类型错误：未定义不是对象（评估'result.cancelled'）云图像上传
可能的未处理承诺拒绝（id：0）：TypeError：适配器不是函数。 （在“适配器（配置）”中，“适配器”未定义）？
可能的未处理承诺拒绝（id：1）：TypeError：网络请求失败