Question

我没有收到“身份验证失败”错误，应将其传递给LoginForm.js

其他所有功能均正常运行。例如，当调用AuthReducer.js中的action.types的另一种情况（EMAIL_CHANGED，PASSWORD_CHANGED）时，将调用LoginForm.js中的mapStateToProps，因此将重新呈现该元素。当我插入错误的电子邮件或密码并在LoginForm.js中单击OnButtonPress时，一切都会首先进行->从index.js调用LoginUser（），并从其中调用loginUserFail（dispatch）。然后，它将使用以下类型进行分派：LOGIN_USER_FAIL。然后在switch语句中的AutRecucer.js中，一切似乎都还不错-正确调用LOGIN_USER_FAIL的情况，但是问题就在这里-即使这种情况在LoginForm.js ins中根本没有调用也返回了新状态（错误）mapStateToProps ...我必须在电子邮件的密码字段中键入另一个符号（以调用onEmailChang或onPasswordChange），然后显示错误（调用mapStateToProps）

//LoginForm.js
class LoginForm 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 });
}

renderButton() {

return (
  <Button onPress={this.onButtonPress.bind(this)}>
    Login
  </Button>
);
}

render() {
return (
  <Card>
    <CardSection>
      <Input
        label="Email"
        placeholder="email@gmail.com"
        onChangeText={this.onEmailChange.bind(this)}
        value={this.props.email}
      />
    </CardSection>

    <CardSection>
      <Input
        secureTextEntry
        label="Password"
        placeholder="password"
        onChangeText={this.onPasswordChange.bind(this)}
        value={this.props.password}
      />
    </CardSection>

    <Text style={styles.errorTextStyle}>
      {this.props.error}
    </Text>

    <CardSection>
      {this.renderButton()}
    </CardSection>
  </Card>
 );
}
}

const mapStateToProps = ({ auth }) => {
console.warn('mapStateToProps is called');
const { email, password, error } = auth;

return { email, password, error };
};

export default connect(mapStateToProps, {
emailChanged, passwordChanged, loginUser
})(LoginForm);

//AuthReducer.js
const INITIAL_STATE = {
email: '',
password: '',
user: null,
error: null,
};

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, loading: true, error: '' };
case LOGIN_USER_SUCCESS:
  return { ...state, ...INITIAL_STATE, user: action.payload };
case LOGIN_USER_FAIL:
  //this is working
  return { ...state, error: 'Authentication Failed.', password: 
'', loading: false };
default:
  return state;
}
};
export const emailChanged = (text) => {
return {
type: EMAIL_CHANGED,
payload: text,
};
};

export const passwordChanged = (text) =>{
return {
type: PASSWORD_CHANGED,
payload: text,
};
};


export const loginUser = ({ email, password }) => {
const firebase = require("firebase");
return (dispatch) => {
firebase.auth().signInWithEmailAndPassword(email, password)
  .then(user => loginUserSuccess(dispatch, user))
  .catch((error) => {
    firebase.auth().createUserWithEmailAndPassword(email, 
 password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch(() => {
        // loginUserFailed is called properly here
        loginUserFail(dispatch)
      });
  });
  };
  };

  const loginUserFail = (dispatch) => {
 console.warn('catch error');
 dispatch({ type: LOGIN_USER_FAIL });
 };

即使状态更改，也不调用mapStateToProps

0 个答案: