React Native Fetch работает только при втором нажатии

Question

Я делаю приложение на React Native. Проблема заключается в следующем:

OnPress некоторого элемента я пытаюсь сделать запрос к серверу и войти ответ.

Когда я нажимаю кнопку в первый раз - мой журнал ничего не показывает, а на втором клике я вижу ответ в консоли.

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' 
    } 
    } 
) 

Моя выборка функцию

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) 
    }) 

}

Также хочу добавить, что я с помощью Genymotion, как андроид emul.Another странно то, что, когда я нажимаю мою кнопку первый раз - ничего не происходит, но когда я нажимаю Reload JS, до того, как компонент будет размонтировать, я вижу свою responceData в консоли

Answer 1

Вы должны обновить состояние, когда обещание решено.

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

Используйте метод загвоздка:

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

Кроме того, где ваша функция предупреждения? У реагирования-native есть модуль Alert.

Alert.alert('any message text'); 

---

статья о fetch

и это article с использованием выборки в реакции родной

Answer 2

Еще одна странная вещь, что, когда я нажимаю мою кнопку первый раз

Это очень похоже на d для фокусировки. Попробуйте установить keyboardShouldPersistTaps = true для TouchableNativeFeedback