反應問題

Question

我有一個非常簡單的登錄屏幕，用戶輸入用戶名和密碼。當用戶點擊登錄按鈕時，如果輸入的用戶名/密碼組合正確，流程將移動到下一個屏幕。

點擊登錄按鈕，我打電話給用戶名和密碼作爲輸入的API。 API以JSON格式從DB返回匹配記錄的計數。如果計數> 0，則登錄成功。

Issue：我必須點擊登錄按鈕兩次。當我點擊登錄按鈕沒有任何反應，但如果我再次點擊它，然後我得到失敗消息或移動到第二個屏幕取決於用戶名/密碼組合。我在下面複製我的代碼。我會感謝任何幫助。

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

問題可能與您按下按鈕時的異步過程有關。獲取將返回一個承諾，然後可以在響應完成後解決。試試這個，不要用await（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})  
     } 
    }); 
}