Expo 应用程序抛出 TypeError: undefined is not an object (evalating '_this2.state.notification.data')

Question

我正在努力修复我的 expo 应用程序在密码重置时它给了我这个错误：

TypeError: undefined is not an object (evalating '_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;

我真的被这个错误困住了。请帮我修复它。我已经尝试了在网络上搜索的所有内容，但没有结果。

提前谢谢你！

Answer 1

这样检查

{this.state.notification && this.state.notification.data && this.state.notification.data.message &&
          <Notification
            notification={this.state.notification}
            reset={() => this.setState({notification : {data : {}}})}
          />
        }