反应原生问题

Question

我有一个非常简单的登录屏幕，用户可以在其中输入用户ID和密码。 当用户单击登录按钮时，如果输入的用户 ID/密码组合正确，则流将移动到下一个屏幕。

单击登录按钮后，我正在调用一个以用户ID和密码作为输入的API。API 以 JSON 格式从数据库返回匹配记录的计数。如果计数为>0，则登录成功。

问题：我必须单击登录按钮两次。 当我单击登录按钮时，没有任何反应，但是如果我再次单击它，则会收到失败消息或移动到第二个屏幕，具体取决于用户ID/密码组合。我正在复制下面的代码。我将不胜感激任何帮助。

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 将返回一个承诺，然后在响应完成后可以解析该承诺。试试这个，不要使用 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})      
}
});
}