未解決のプロミス拒否（ID：0）：TypeError：TypeError：ヌルのプロパティ 'email'を読み取ることができません。

Question

私のネイティブプロジェクトには問題があります。 firebaseでログインし、データをAsyncStorageに保存すると、最初にログインすると常にエラーメッセージが表示されますが、2回目にこのエラーは表示されません。私はこの問題について本当に混乱しています。

Dashboard.js

constructor(props){ 
    super(props); 
    this.state= { 
     user: null, 
     loading: true, 
    } 
} 

componentWillMount() { 
    AsyncStorage.getItem('userData').then((user_data_json) => { 
     let userData = JSON.parse(user_data_json); 
     this.setState({ 
      user: userData, 
      loading:false 
     }); 
     console.log(this.state.user) 
    }); 
} 

Logout(){ 
    AsyncStorage.removeItem('userData').then(() => { 
     firebase.auth().signOut().then(() => { 
      this.props.navigation.navigate('Login') 
     }); 

    }); 
    console.log(this.state.user) 
} 

render() { 
    if(this.state.loading){ 
     return <ActivityIndicator size="large" /> 
    } 
    return(
     <View> 
      <Text style={styles.title}> Hello {this.state.user.email} </Text> 
      <Button title="Log Out" onPress={this.Logout.bind(this)} /> 
     </View> 
    ) 
} 

}

Answer 1

は今、あなたはthis.state.user.emailにアクセスしようとしているが、あなたの初期状態はnullにuserを設定します。あなたは空のオブジェクトであるためにあなたの初期状態を変更すると、このエラーは消えます。

constructor(props) { 
    super(props); 
    this.state = { 
     user: {}, 
     loading: true 
    } 
} 

Answer 2

問題発生をラインから： -

<Text style={styles.title}> Hello {this.state.user.email} </Text> 

は時々SETSTATEの状態を設定するにはある程度の時間を要し、 setStateが作業を完了する前にレンダリングが呼び出され、この場合はその時点でthis.state.userは使用できないため、エラーがスローされます。 だから、あなたがレンダリング状態変数を使用している将来的にこのようなエラーを回避するために、次の操作を行うことができます： -

<Text style={styles.title}> Hello {this.state.user && this.state.user.email} </Text> 

か、としても、コンストラクタでの状態でユーザ変数を宣言することができます： -

constructor(props) { 
    this.state = { 
     user:{ email: ''} 
    } 

を