当新用户首次注册并在提交过程中出现错误时，此操作按预期进行，但在用户点击重试后，它仅循环至错误页面（RegistrationFailure.js），但在后台进行了一项活动
我需要这方面的帮助，因为好几天我都无法真正知道问题出在哪里。
Register.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableHighlight, Alert } from 'react-native';
import { Container, Content, Input, Button, Footer, FooterTab, Text } from 'native-base';
import { connect } from 'react-redux';
import StepIndicator from 'react-native-step-indicator';
// import { RegisterFinal, RegisterStepOne, RegisterStepTwo, Progress, Congratulation } from '../components/register'
import RegisterStepOne from '../components/register/RegisterStepOne'
import RegisterStepTwo from '../components/register/RegisterStepTwo'
import RegisterFinal from '../components/register/RegisterFinal'
import ProgressIn from '../components/register/ProgressIn'
import Congratulation from '../components/register/Congratulation'
import RegistrationFailure from '../components/register/RegistrationFailure'
import { StackActions } from 'react-navigation';
import { register, updateDraft } from '../actions/auth';
import {StepOne} from '../screens/WalkThrough';
import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';
//Temprorary api call for confirm pin
const api = new Frisbee({
baseURI: 'https://localhost:5678', //'http://localhost:3000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
const MAX_LENGTH_CODE = 6;
const MAX_LENGTH_NUMBER = 14;
const customStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize: 40,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#222',
stepStrokeWidth: 1,
stepStrokeFinishedColor: '#222',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#0d6851',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#0d6851',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#222',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#222'
}
class Register extends Component {
constructor(props) {
super(props);
this.state = {
onChangeText: false,
registrationState: 0,
currentPage: 0,
confirmationPin: "",
error: null,
enterCode: false,
spinner: false,
};
}
//Getting the otp from the api temporary
_getCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.post('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.setState({
spinner: false,
enterCode: true,
verification: res.body
});
this.refs.form.refs.Input.setNativeProps({ text: '' });
setTimeout(() => {
Alert.alert('Sent!', "We've sent you a verification code", [{
text: 'OK',
onPress: () => this.refs.form.refs.Input.focus()
}]);
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
_verifyCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.put('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.refs.form.refs.Input.blur();
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Success!', 'You have successfully verified your phone number');
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
onChangeText = (val) => {
if (!this.state.enterCode) return;
if (val.length === MAX_LENGTH_CODE)
this._verifyCode();
}
_tryAgain = () => {
this.refs.form.refs.Input.setNativeProps({ text: '' })
this.refs.form.refs.Input.focus();
this.setState({ enterCode: false });
}
sendRegistration(){
let payload = Object.assign({}, {confirmationPin: this.state.confirmationPin}, this.props.registrationDraft)
console.log({Req: payload});
this.props.register(payload);
//This is what i added for the code verification
this.state.enterCode ? this._verifyCode() : this._getCode();
}
render() {
return (
<Container>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image style={styles.logotop} source={require("../assets/img/proximity.png")} />
<Text style={{ fontSize: 30, fontFamily: 'Raleway-Regular', }}>Provisioning</Text>
</View>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={customStyles}
stepCount={4}
currentPosition={this.state.currentPage}
labels={[]}
/>
</View>
<Content>
{/* <ErrorBar /> */}
{this.state.currentPage === 0 && <RegisterStepOne updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} dispatch={this.props.navigation.dispatch} />}
{this.state.currentPage === 1 && <RegisterStepTwo updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} />}
{this.state.currentPage === 2 && <RegisterFinal updateField={(e)=>this.setState(e)} params={this.state} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && <ProgressIn registrationState={this.props.registrationState} />}
{this.state.currentPage === 3 && this.props.registrationState === 4 && <Congratulation styles={styles} navigate={(e) => this.props.navigation.navigate(e)} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && this.props.registerFailed !== true && <RegistrationFailure styles={styles} dispatch={this.props.navigation.dispatch}/>}
</Content>
<Spinner
visible={this.state.spinner}
textContent={'One moment...'}
textStyle={{ color: '#222' }}
/>
{this.state.currentPage < 3 &&
<Footer style={{ flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0, elevation: 0 }} transparent noShadow>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submitQuit} onPress={() => {
if(this.state.currentPage === 0){
this.props.navigation.dispatch(/*StackActions.popToTop()*/StackActions.pop({n: 2}));
}else{
this.setState({ currentPage: this.state.currentPage - 1 })
}
}}>
<Text style={styles.submitTextQuit}> { this.state.currentPage === 0 ? 'Back' : 'Back' }</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submit} onPress={() => {
console.log({ isWorking: this.props.isWorking});
if (this.props.isWorking){
console.log('response for this');
return;
}
console.log(this.state.currentPage)
if(this.state.currentPage === 0){
if(!this.props.registrationDraft.firstName.length ||
!this.props.registrationDraft.surname.length ||
!this.props.registrationDraft.NINLastSix.length ||
!this.props.registrationDraft.yearOfBirth.length ||
!this.props.registrationDraft.phone.length){
Alert.alert(
'Warning!!!!',
'Fill out the required fields',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 2")
return;
}
}
if(this.state.currentPage === 1){
if(!this.props.registrationDraft.password.length ||
!this.props.registrationDraft.confirmPassword.length){
Alert.alert(
'Warning!!!!',
'Fill out your Password',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 3")
return;
}
if(this.props.registrationDraft.password !==
this.props.registrationDraft.confirmPassword){
Alert.alert(
'Warning!!!!!!',
'Password do not match',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("passwords do not match");
return;
}
}
if(this.state.currentPage + 1 === 3){
// if(!this.props.registrationDraft.comfirmPin.length)
this.sendRegistration();
}
this.setState({ currentPage: this.state.currentPage + 1 })
}}>
<Text style={styles.submitText}>{ this.state.currentPage === 2 ? 'Send' : 'Next' }</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
}
</Container>
)
}
}
function mapStateToProps(store) {
return {
isWorking: store.isWorking,
// errorMessage: store.auth.regError,
registered: store.auth.registered,
registerFailed: store.auth.registerFailed,
registerFailedMessage: store.auth.registerFailedMessage,
registrationState: store.auth.registrationState,
registrationDraft: store.auth.registrationDraft
// authToken: store.auth.authToken
};
}
function mapDispatchToProps(dispatch) {
return {
register: (user) => dispatch(register(user)),
updateDraft: (keyValue) => dispatch(updateDraft(keyValue)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);
//Registeration styling
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
paragraph: {
margin: 10,
marginTop: 0,
fontSize: 20,
fontWeight: '200',
textAlign: 'left',
color: '#090a08',
fontFamily: 'sans-serif-light',
},
logotop: {
backgroundColor: "transparent",
marginTop: 25,
height: 80,
width: 200,
resizeMode: 'contain'
},
stepIndicator: {
marginVertical: 10,
marginTop: 10,
},
circles: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 20,
alignSelf: 'center',
color: '#222'
},
rowItem: {
flex: 3,
paddingVertical: 20
},
title: {
flex: 1,
fontSize: 20,
color: '#333333',
paddingVertical: 16,
fontWeight: '600'
},
body: {
flex: 1,
fontSize: 15,
color: '#606060',
lineHeight: 24,
marginRight: 8
},
submit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
submitQuit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitTextQuit: {
color: '#fff',
textAlign: 'center',
marginRight: 6,
fontSize: 20,
},
input: {
backgroundColor: '#ffffff',
borderBottomWidth: 0,
marginBottom: 10,
borderRadius: 2,
paddingVertical: 5,
width: '100%'
},
placeholder: {
fontSize: 12
},
errorMessage: {
marginTop: 40
},
loggedInDesc: {
marginTop: 40
},
congratulations: {
fontSize: 30,
textAlign: 'center',
color: '#0d6851',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
},
registrationFailed: {
fontSize: 30,
textAlign: 'center',
color: 'red',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
}
});
RegistrationFailure.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, BackHandler, Alert } from 'react-native';
import { Text, Footer, FooterTab, Container, } from 'native-base';
import { StackActions, createStackNavigator, createAppContainer } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Register',
params: {
myUserId: 9,
},
});
export default class RegisterFinal extends Component {
render() {
let dispatch = this.props.dispatch;
// const { goBack } = this.props.navigation;
return (
<View style={styles.container}>
<View>
<View>
<View>
<Text style={{margin: 4, marginTop: 30, alignSelf: 'center', color: 'red', fontSize: 20}}>Ooops!!</Text>
<Text style={{ margin: 4, marginTop: 20, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}>
Your submission returned an error</Text>
<Text style={{ margin: 4, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}> Please go back and try again.
</Text>
</View>
{/* <Footer style={{ backgroundColor: 'transparent', height: 140, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{ margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}>
<TouchableHighlight style={styles.submit} onPress={() => { console.log("Proceeding to Start All Over"); dispatch(StackActions.pop({ n: 2 })) }}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer> */}
<Footer style={{ justifyContent: 'center', marginTop: 140, alignSelf: 'center', flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{marginLeft: -10, margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit} onPress={() => {
// Alert.alert(
// 'Exit App',
// 'Do you want to exit?',
// [
// {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: 'Yes', onPress: () => {this.props.dispatch(StackActions.pop({n: 1}));
// BackHandler.exitApp();}},
// ],
// { cancelable: false });
// return true;
console.log('you just tap quit');
console.log(this.props);
// return this.state.handleBackPress;
this.props.dispatch(StackActions.pop({n: 4}));
BackHandler.exitApp();
}}>
<Text style={styles.submitText}>Quit</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit}
onPress={() => { console.log("Proceeding to Start All Over");
this.props.dispatch(pushAction);
}}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
submit:{
marginTop: 0,
paddingTop: 5,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
});