Reactive Native Get Async Speicher Rückgabe Unhandled Promise

Question

Im Moment möchte ich Benutzer Token nach der Benutzeranmeldung erfolgreich speichern.

Hier ist mein Code:

onPress(){ 
    return axios.post('https://api.example.net/v1/user/auth/login', { 
    email: this.state.email, 
    password: this.state.password, 
    }, { 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    }).then((response) => { 
    AsyncStorage.setItem('token', response.data.login._cxz,() => { 
     console.log('success'); 
    }); 
    this.props.navigator.immediatelyResetRouteStack([{name: 'tweets'}]); 
    }) 
    .catch((error) => { 
     this.setState({errorMessage: error.response.data.message}); 
    }); 
} 

ich schon sicher, dass response.data.login._cxz einen Wert hat. Richtig bis hier funktioniert. Der Login wird mich auf tweets Route umleiten.

Auf meinem tweets.js:

constructor(props){ 
    super(props); 
    this.state({token : ''}); 
    } 
    componentWillMount() { 
    AsyncStorage.getItem('token', (err, value) => { 

     console.log(value); 
    }) 
    } 

ich nur einfache console.log es, wenn das Token anzuzeigen gespeichert ist oder nicht. Aber jedes Mal ist die Anmeldung abgeschlossen (das Erfolgsprotokoll wird angezeigt). Ich habe immer diesen Fehler, wenn meine Tweets eingeben:

Jede Lösung?

Danke.

Answer 1

Was höchstwahrscheinlich passiert ist, dass der then Rückruf einen Fehler bei navigator.immediatelyResetRouteStack wirft:

.then((response) => { 
    AsyncStorage.setItem('token', response.data.login._cxz,() => { 
    console.log('success'); 
    }); 
    this.props.navigator.immediatelyResetRouteStack([{name: 'tweets'}]); 
}) 
.catch((error) => { 
    this.setState({errorMessage: error.response.data.message}); 
}); 

Der Fehler wird dann gefangen im catch Block, sondern weil der Fehler ist ein normale JavaScript Error und nicht ein axios error, es hat keine response -Eigenschaft, und daher versucht der Zugriff auf error.response.data den undefinierten Fehler.

Der einfache Weg, um die Art von Fehler ist zu ducken Typ es zu erkennen: Wenn der Fehler ein response hat, dann ist es ein axios Fehler, sonst ein anderer Fehler:

.catch((error) => { 
    if (error.response && error.response.data) { 
    this.setState({errorMessage: error.response.data.message}); 
    } else { 
    this.setState({errorMessage: error.message}); 
    } 
}); 

Die von immediatelyResetRouteStack verursacht Fehler wahrscheinlich aus dem React-Render-Durchlauf, der synchron auf demselben Aufruf-Stack ausgeführt wird. Sobald Sie die gebrochene .catch beheben werden Sie sehen, was die Fehlermeldung, sondern eine gute Vermutung für einen Täter in Ihrer begrenzten Codebeispiel ist:

this.state({token : ''}); 

, die eine Eigenschaftszuweisung sein sollte, anstelle eines Methodenaufruf:

this.state = {token : ''};