Reactnative Issue

Question

ユーザーIDとパスワードを入力する非常に簡単なログイン画面があります。ユーザがログインボタンをクリックすると、入力されたユーザID /パスワードの組み合わせが正しい場合、次の画面に移る。ログインボタンのクリックで

、私は、入力としてユーザーIDとパスワードを使ってAPIを呼び出しています。 APIは、一致するレコードの数をJSON形式のDBから返します。カウントが0より大きい場合は、ログインに成功します。

問題：ログインボタンを2回クリックする必要があります。ログインボタンをクリックしても何も起こりませんが、再度クリックすると、ユーザーID /パスワードの組み合わせに応じて、失敗メッセージが表示されたり、2番目の画面に移動したりします。私は以下のコードをコピーしています。助けていただければ幸いです。

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    View, 
    Image, 
    StyleSheet, 
    KeyboardAvoidingView, 
    TextInput, 
    TouchableOpacity, 
    Text, 
    StatusBar, 
    Alert 
} from 'react-native'; 

import { 
    StackNavigator 
} from 'react-navigation'; 

export default class Login extends Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     email: '', 
     password: '', 
     uCount: -1, 
     data: [] 
    }; 
    } 

    getData(){ 
    var url="https://myurl/verifySubscription.php?email=" + this.state.email + "&password=" + this.state.password; 
    console.log("URL:", url); 
    return fetch(url) 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    this.setState({ 
     uCount: responseJson.count 
    }) 
    }) 
    .catch((error) => { 
     console.error(error); 
    }); 
    } 

async _onPressButton() { 

     await this.getData(); 
     console.log("uCount:", this.state.uCount); 
     if (this.state.uCount < 1) { 
      Alert.alert('Login Failed: Incorrect email or password') 
     } else { 
      this.props.navigation.navigate('LoginSuccess', { email: this.state.email, password: this.state.password})  
     } 
    } 

    render() { 

    return (
     <KeyboardAvoidingView behavior="padding" style={styles.wrapper}> 
      <View style={styles.topView}> 
      <Image style={styles.imageStyle} 
      source={require('../images/main.jpg')} 
      /> 
      </View>   
      <View style={styles.bottomView}> 
       <StatusBar 
       barStyle="light-content" 
       /> 
       <TextInput style={styles.Input} 
       placeholder="Email" 
       placeholderTextColor="rgba(255,255,255,0.7)" 
       keyBoardType='email-address' 
       returnKeyType="next" 
       autoCapitalize="none" 
       autoCorrect={false} 
       onSubmitEditing={() => this.passwordInput.focus()} 
       onChangeText={(text) => this.setState({email:text})} 
       /> 
       <TextInput style={styles.Input} 
       placeholder="Password" 
       placeholderTextColor="rgba(255,255,255,0.7)" 
       returnKeyType="go" 
       secureTextEntry 
       autoCapitalize="none" 
       autoCorrect={false} 
       ref={(next) => this.passwordInput = next} 
       onChangeText={(text) => this.setState({password:text})} 
       /> 
       <TouchableOpacity style={styles.button1Container} onPress={ this._onPressButton.bind(this) }> 
       <Text style={styles.buttonText}> 
        Login 
       </Text> 
       </TouchableOpacity> 
       <TouchableOpacity style={styles.button2Container}> 
       <Text style={styles.buttonText}> 
        Sign up 
       </Text> 
       </TouchableOpacity> 
      </View> 
     </KeyboardAvoidingView> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    wrapper: { 
     backgroundColor: '#4A7AA5', 
     flex: 1 
    }, 
    topView: { 
     flexGrow: 1 
    }, 
    imageStyle: { 
     width: null, 
     flex: 1 
    }, 
    bottomView: { 
     padding: 20 
    }, 
    Input: { 
     height:40, 
     backgroundColor: 'rgba(255,255,255,0.3)', 
     marginBottom: 10, 
     color: '#FFF', 
     paddingHorizontal: 10 
    }, 
    button1Container: { 
     backgroundColor: 'rgba(200,200,255,0.3)', 
     padding: 10 
    }, 
    buttonText: { 
     textAlign: 'center', 
     color: '#FFF', 
     fontWeight: '700' 
    }, 
    button2Container: { 
     padding: 10 
    } 
}); 

Answer 1

ボタンを押したときに問題が発生した可能性があります。 fetchは応答を完了した後で解決できる約束を返します。これを試してみてください（es2017）、単にes6を使用しないでください。

getData(){ 
    var url="https://myurl/verifySubscription.php?email=" + this.state.email + 
    "&password=" + this.state.password; 
    console.log("URL:", url); 
    return fetch(url); 
} 

_onPressButton() { 
    this.getData().then((response) => response.json()) 
      .then((responseJson) => { 
     const cnt = responseJson.cnt; 

     if (cnt < 1) { 
     Alert.alert('Login Failed: Incorrect email or password') 
     } else { 
     this.props.navigation.navigate('LoginSuccess', { email: 
      this.state.email, password: this.state.password})  
     } 
    }); 
}