Expo 应用程序抛出 TypeError:未定义不是对象(评估‘_this2.state.notification.data’)
2020-10-27
918
我正在努力修复我的 expo 应用程序。重置密码时,它给出了此错误:
TypeError: undefined is not an object (evaluating '_this2.state.notification.data')
我的重置密码代码如下所示
import React from 'react';
import {
View,
ScrollView,
Text,
Image,
StyleSheet
} from 'react-native';
// import { CheckBox } from 'react-native-elements';
import Notification from '../../components/notification';
import Input from '../../components/input_default';
import Button from '../../components/button_signing_default';
import {User_consumer} from '../../components/providers/user';
import Modal from '../../components/modal';
import styles from './style';
// import DatePicker from 'react-native-datepicker';
import KeyboardSpacer from 'react-native-keyboard-spacer';
export default class Password_forget extends React.Component {
state = {
email : '',
errors : {
email : false
},
notification : {
data : {}
},
show_modal : false
}
static navigationOptions = {
title : 'Forgotten password',
headerStyle : styles.nav,
headerTintColor : '#fff',
headerTitleStyle : styles.nav__title
}
render() {
return(
<User_consumer>
{(user) =>
<ScrollView
contentContainerStyle={styles.container}
>
<View style={styles.title__wrapper}>
<Text style={styles.title}>
Lorem Ipsum
</Text>
</View>
<Input
label="Емейл"
value={this.state.email}
onChangeText={(email) => this.setState({email})}
hasError={this.state.errors.email}
keyboardType={'email-address'}
/>
<Button
style={{
marginTop : 30
}}
title="Изпрати"
icon="user-plus"
onPress={() => {
const {
email
} = this.state;
user.forgot_password({email})
.then(response => {
if (response.status === 200) {
this.setState({show_modal : true});
return
}
console.log(response);
const errors = response.error || this.state.errors;
const notification = response.notification || this.state.notification;
this.setState({errors, notification : response.notification});
})
.catch(err => {
console.log('IN PASSWORD FORGET', err);
this.setState({
notification : {
data : {
title : 'Lorem Ipsum',
message : 'Ipsum'
}
}
})
});
}}
/>
{this.state.notification.data.message &&
<Notification
notification={this.state.notification}
reset={() => this.setState({notification : {data : {}}})}
/>
}
<Modal
show_modal={this.state.show_modal}
title="Успех"
message="Ipsum"
onClose={() => {this.props.navigation.navigate('Sign_in')}}
/>
<KeyboardSpacer />
</ScrollView>
}
</User_consumer>
);
}
};
我的通知组件代码如下所示。
import React from 'react';
import {
Notifications
} from 'expo';
import {
Text,
View,
TouchableHighlight
} from 'react-native';
import { FontAwesome, Ionicons, SimpleLineIcons, MaterialCommunityIcons } from '@expo/vector-icons';
import {Screen_consumer} from '../../components/providers/dimension';
const Notification = ({notification, reset}) => {
return (
<Screen_consumer>
{(screen) =>
<View
style={
{
flex : 1,
justifyContent : 'center',
alignItems : 'center',
position : 'absolute',
top : 0,
zIndex : 10000,
// bottom : 0,
width : screen.width,
backgroundColor : '#fff',
}
}
>
<View
style={{
flex : 1,
justifyContent : 'flex-end',
flexDirection : 'row',
alignItems : 'center',
backgroundColor : '#2C2D44',
// paddingTop : 10,
// paddingBottom : 10,
paddingLeft : 20
}}
>
<Text
style={{
fontSize : 20,
fontWeight : 'bold',
color : '#fff',
flexGrow : 1
}}
>
{notification.data.title}
</Text>
<TouchableHighlight
onPress={() => {reset()}}
style={{
paddingBottom : 20,
paddingTop : 20,
paddingLeft : 20,
paddingRight : 20
}}
underlayColor={'rgba(255,255,255, .1)'}
>
<FontAwesome name="close" size={24} color="#fff"/>
</TouchableHighlight>
</View>
<View
style={{
flex : 1,
paddingLeft : 20,
paddingTop : 20,
paddingBottom : 20,
paddingRight : 20,
}}
>
<Text>
{typeof notification.data.message !== 'string'
? 'Ipsum'
: notification.data.message
}
</Text>
</View>
<View
style={{
flex : 1,
width : '100%',
height : 20,
backgroundColor : '#2C2D44',
}}
>
<Text>
</Text>
</View>
</View>
}
</Screen_consumer>
);
}
export default Notification;
我真的被这个错误困住了。请帮我修复它。我尝试了网上搜索的所有方法,但没有结果。
提前谢谢您!
1个回答
像这样进行检查
{this.state.notification && this.state.notification.data && this.state.notification.data.message &&
<Notification
notification={this.state.notification}
reset={() => this.setState({notification : {data : {}}})}
/>
}
Nikhil bhatia
2020-10-27