我使用connect
绑定actions 'isLoading' & 'onLogin'
,但未定义为'this.props'在日志中未定义。我已多次检查过我认为代码应该没问题,但我无法弄清楚我在redux概念中错过了什么。
接下来的问题是'它是一种在LoginButton.js
中将params传递给容器的正确方法吗?'
很感激有人可能会建议一些建议来帮助我,谢谢!!
我认为一些可能导致以下错误的可能文件。
My SourceCode
LoginButton.js
import {loginStyles} from 'App/styles';
import {loginUser} from 'App/redux/actions/actionCreators'
export const LoginButton = ({isLoading, onLogin, username, password }) => {
let loginButton;
console.log('props: ' + this.props);
if (isLoading){
loginButton = (
<Button primary full rounded >
<Spinner style={loginStyles.spinner} color='white'/>
<Text style={loginStyles.IconDivider}>Loading...</Text>
</Button>
)
}else{
loginButton = (
<Button primary full rounded
onPress={() => onLogin(username, password)}>
<Text>Login</Text>
</Button>
)
}
return loginButton;
}
const styles = StyleSheet.create({
buttonContainer:{
flex:1,
flexDirection:'row'
}
})
const mapStateToProps = state => ({
isLoading: state.auth.isLoading,
username: state.auth.username,
password: state.auth.password
});
const mapDispatchToProps = dispatch => ({
onLogin: (username, password) => dispatch(loginUser(username, password))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(LoginButton);
Login.js
import {LoginButton} from 'App/components';
export class Login extends Component {
constructor(props){
super(props);
this.state = {
username: '',
password: ''
}
}
render() {
return (
<Container>
<Content contentContainerStyle={styles.contentContainer}>
<Image source={images.login} style={styles.bg}>
<View style= {loginStyles.formContainer}>
<InputGroup style={loginStyles.input}>
<Icon name="ios-mail-outline" style={loginStyles.icon} />
<Input
onChangeText={(username) => this.setState({username})}
value={this.state.username}
placeholder={"Email Address"} />
</InputGroup>
<InputGroup style={loginStyles.input}>
<Icon name="ios-lock-outline" style={loginStyles.icon} />
<Input
onChangeText={(password) => this.setState({password})}
value={this.state.password}
secureTextEntry={true}
placeholder={"Password"} />
</InputGroup>
<View style={loginStyles.button}>
<LoginButton username={this.state.username} password={this.state.password}/>
</View>
</View>
</Image>
</Content>
</Container>
);
}
}
const mapStateToProps = state => {
return {
payload: state.auth.payload
};
}
export default connect(mapStateToProps, null)(Login);
actionCreators.js
function loginSuccess(username, password) {
return {
type: types.LOGIN_SUCCESS,
username: username,
password: password
}
}
function loginFailure(error) {
return {
type: types.LOGIN_FAILURE,
payload: error
}
}
export function loginUser(username, password) {
return function(dispatch) {
if (username == 'admin' && password == '123qwe'){
dispatch(loginSuccess(username, password));
}else{
dispatch(loginFailure('Incorrect username or password'));
}
};
}
答案 0 :(得分:2)
我注意到有两件事可能会导致代码出现问题:
您正在创建stateless
组件,但您正在尝试记录
this.props
这不会起作用,因为你不在class
内
组件,你不希望你的任何props
参数
功能签名:
export const LoginButton = ({isLoading, onLogin, username, password }) => {...
在LoginButton.js
中导出命名对象LoginButton
除了默认导出,它是组件
连接到redux
:
export default connect(
mapStateToProps,
mapDispatchToProps
)(LoginButton);
但是在Login.js
中你要导入命名导出(不是
已连接到redux
):
import {LoginButton} from 'App/components';
您应该将其更改为默认导入语法:
import LoginButton from 'App/components';