React Native Fetch funktioniert nur beim zweiten Klick

Question

Ich mache App auf React Native. Das Problem ist das nächste:

OnPress ein Element, das ich versuche, Anfrage an meinen Server und Log-Antwort.

Wenn ich zum ersten Mal auf die Schaltfläche klicken - mein Protokoll zeigt nichts, aber auf einen zweiten Klick sehe ich Antwort in der Konsole.

import React from 'react' 

import { View, Text, StyleSheet, TextInput , TouchableNativeFeedback  , AsyncStorage } from 'react-native' 
import {connect} from 'react-redux' 
import * as pageActions from '../action/index' 
import { bindActionCreators } from 'redux' 

import api from '../api' 


class Login extends React.Component { 

constructor(props){ 
super(props); 
this.state = { 
    loginAttempt : false, 
    email : 'admin@mail.ru', 
    password : 'password', 
    token : '' 
} 
} 

loginAttempt() { 
    let email = this.state.email; 
    let password = this.state.password; 
    api.login(email,password) 
} 
    render() { 
    return (
     <View style={styles.container}> 
     <TextInput 
     placeholder="Email" 
     style={{height: 50, borderColor: 'gray', borderWidth: 1}} 
     onChangeText={(value) => this.setState({email : value})} 
    /> 
    <TextInput 
     placeholder="Password" 
     style={{height: 50, borderColor: 'gray', borderWidth: 1}} 
     onChangeText={(value) => this.setState({password : value})} 
    /> 
    <TouchableNativeFeedback 
     style={!this.state.loginAttempt ? {'opacity' : 1} : {'opacity' : 0}} 
     onPress={() => this.loginAttempt()}> 
     <View> 
     <Text>Try login</Text> 
     </View> 
    </TouchableNativeFeedback> 
    </View> 
    ) 
    } 
    } 

var styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center' 
    } 
    } 
) 

meine Funktion

login(email,password, callback) { 

const API_HEADERS = { 
    'Accept' : `application/json`, 
    'Content-Type' : `application/json` 
    }; 


let user = {}; 
user.email = email; 
user.password = password; 


fetch(`http://myIp:3000/auth/login`, { 
    method : 'post', 
    headers : API_HEADERS, 
    body : JSON.stringify(user) 
}) 
    .then((response) => { 
    if (response.ok) { 
     return response.json(); 
    } else { 
     alert(`Wrong data`) 
    } 
    }) 
    .then((responseData) => { 
    console.log(responseData) 
    }) 

}

Auch will holen hinzufügen, dass ich Genymotion mit als android emul.Another Merkwürdige ist, dass, wenn ich meine Taste erstes Mal drücken - nichts passiert, aber Wenn ich Reload JS drücken, bevor die Komponente unmount wird, sehe ich meine responceData in einer Konsole

Answer 1

Sie sollten Status aktualisieren, wenn Versprechen gelöst.

.then((responseData) => { 
    this.setState({ 
     token: responseData.token 
    }); 
    }) 

Verwenden Fangmethode:

.then().catch(e => console.log("error: ", e)) 

auch, wo ist Ihre Alarm-Funktion? react-native hat Alert-Modul.

Alert.alert('any message text'); 

---

Artikel über fetch

und das ist article mit holen in reagieren-native

Answer 2

Eine weitere seltsame Sache ist, dass, wenn ich meine Taste ersten Mal drücken

Dies ist sehr ähnlich zu beziehen d zu konzentrieren. Versuchen Sie die Einstellung keyboardShouldPersistTaps = true für TouchableNativeFeedback