Question

我使用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'));
    }
  };
}

Answer 1

我注意到有两件事可能会导致代码出现问题：

您正在创建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';
```

使用redux时，undefined不是'onLogin'函数

1 个答案: