【发布时间】：2019-03-24 19:13:56
【问题描述】：
我有一个包含Signin 和Signup 按钮的屏幕。当用户点击SigninButton 时，我将他发送到登录屏幕。在登录屏幕中，有两个文本输入，用于接收用户的电子邮件和密码。如果成功，用户发送到主屏幕。如果没有，我会抛出一个error 文本。但是如果用户从导航栏返回并返回登录屏幕，电子邮件输入和错误消息仍然显示在那里。我正在使用redux，我无法清空包含电子邮件和错误文本的道具。我尝试了componentWillUnmount、componentWillMount 等，但仍然找不到清空这些道具的合适位置。这是我登录屏幕中的代码；
class LoginScreen extends Component {
componentWillReceiveProps(nextProps) {
this.onAuthComplete(nextProps);
}
onAuthComplete(props) {
if (props.user) {
this.props.navigation.navigate('main');
}
}
render() {
return(
<View style={styles.container}>
<SigninForm />
</View>
);
}
}
const styles = StyleSheet.create({
........
}
});
const mapStateToProps = ({ auth }) => {
const { user, email, error } = auth;
return { user, email, error };
}
export default connect(mapStateToProps, { emailChanged, loginUser })(LoginScreen);
这也是reducer中的代码；
import ......
const INITIAL_STATE = {
email: '',
password: '',
user: null,
error: '',
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMAIL_CHANGED:
return {...state, email: action.payload };
case PASSWORD_CHANGED:
return {...state, password: action.payload };
case LOGIN_USER:
return {...state, error: ''};
case LOGIN_USER_SUCCESS:
return {...state, ...INITIAL_STATE, user: action.payload};
case LOGIN_USER_FAIL:
return {...state, error: 'Authentication Failed', password: ''};
default:
return state;
}
};
这里是 SigninForm 代码；
import React, { Component } from 'react';
import { View, Dimensions, Text } from 'react-native';
import { connect } from 'react-redux';
import { FormInput, FormLabel } from 'react-native-elements';
import { AuthButton } from './';
import { emailChanged, passwordChanged, loginUser } from '../actions';
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
class SigninForm extends Component {
onEmailChange(text) {
this.props.emailChanged(text);
}
onPasswordChange(text) {
this.props.passwordChanged(text);
}
onButtonPress() {
const { email, password } = this.props;
this.props.loginUser({ email, password });
}
render() {
return(
<View style={styles.viewStyle}>
<FormLabel labelStyle={styles.labelStyle}>Email</FormLabel>
<FormInput
placeholder='Enter your email'
keyboardType="email-address"
containerStyle={styles.containerStyle}
inputStyle={styles.inputStyle}
onChangeText={this.onEmailChange.bind(this)}
value={this.props.email}
/>
<FormLabel labelStyle={styles.labelStyle}>Password</FormLabel>
<FormInput
placeholder='Enter a password'
secureTextEntry={true}
containerStyle={styles.containerStyle}
inputStyle={styles.inputStyle}
onChangeText={this.onPasswordChange.bind(this)}
value={this.props.password}
/>
<Text style={styles.errorTextStyle}>
{this.props.error}
</Text>
<AuthButton
title='Sign In'
backgroundColor='#eb4454'
onPress={this.onButtonPress.bind(this)}
/>
</View>
);
}
}
const styles = {
viewStyle: {
top: SCREEN_HEIGHT * -0.15
},
containerStyle: {
marginBottom: 10,
width: SCREEN_WIDTH * 0.80,
borderBottomColor: '#3c143c'
},
labelStyle: {
color: '#3c143c',
fontFamily: 'System',
fontSize: 20
},
inputStyle: {
color: '#3c143c',
fontFamily: 'System',
fontSize: 20
},
errorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
}
}
const mapStateToProps = ({ auth }) => {
const { email, password, error } = auth;
return { email, password, error };
}
export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser })(SigninForm);
【问题讨论】：
-
您没有共享受影响的 SignInForm 组件代码，而是共享了其他所有内容
-
对不起，我是新手。我编辑了帖子并添加了组件代码。
标签： react-native react-redux reducers react-props