输入密码中的空值 react-native redux firebase

Question

我刚用redux学了RN。我有与 RN、redux、redux-thunk、firebase 一起使用的身份验证。当我仅将身份验证与 RN 和 firebase 一起使用并尝试登录时，它有效。但是当我使用 RN 和 redux 时，我得到了这个错误：

signInWithEmailAndPassword failed: Expected 2 Arguments but got 1

我的日志：

App.js:

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './src/reducers/';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';

import LoginForm from './src/components/LoginForm';

export default class App extends Component {
  // Setup Firebase
  componentWillMount() {
    const config = {
      apiKey: 'AIzaSyBIyc6nSBQwec3b84C6hKS5IQlyUS1JkAk',
      authDomain: 'manager-82e0d.firebaseapp.com',
      databaseURL: 'https://manager-82e0d.firebaseio.com',
      projectId: 'manager-82e0d',
      storageBucket: 'manager-82e0d.appspot.com',
      messagingSenderId: '707007441911'
    };
    firebase.initializeApp(config);
  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
    return (
      <Provider store={store}>
        <LoginForm />
      </Provider>
    );
  }
}

AuthReducers.js:

import { EMAIL_CHANGED, PASSWORD_CHANGED } from './../actions/types';

const INITIAL_STATE = { email: '', password: '' };

export default (state = INITIAL_STATE, action) => {
  console.log(action);
  switch (action.type) {
    case EMAIL_CHANGED:
      return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    default:
      return state;
  }
};

动作创作者：

import firebase from 'firebase';
import { EMAIL_CHANGED, PASSWORD_CHANGED } from './types';

export const emailChanged = text => ({
  type: EMAIL_CHANGED,
  paylod: text
});

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

export const loginUser = ({ email, password }) => dispatch => {
  firebase
    .auth()
    .signInWithEmailAndPassword({ email, password })
    .then(user => {
      dispatch({ type: 'LOGIN_USER_SUCCESS', payload: user });
    });
};

组件：LoginForm.js

import React, { Component } from 'react';
import { Card, CardSection, Input, Button } from './common';
import { connect } from 'react-redux';

// import action creator yang mau dipakai
import { emailChanged, passwordChanged, loginUser } from './../actions/';

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 });
  }

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

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

        <CardSection>
          <Button whenPressed={this.onButtonPress.bind(this)}>Login</Button>
        </CardSection>
      </Card>
    );
  }
}

const mapStateToProps = state => ({
  email: state.auth.email, // .auth. -> dapet dari reducers
  password: state.auth.password
});

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

组件：Input.js

import React from "react";
import { View, Text, TextInput } from "react-native";

const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) => {
    const { containerStyle, labelStyle, inputStyle } = styles;

    return (
        <View style={containerStyle}>
            <Text style={labelStyle}>{ label }</Text>
            <TextInput
                secureTextEntry={secureTextEntry}
                autoCorrect={false}
                placeholder={placeholder}
                style={inputStyle}
                value={value}
                onChangeText={onChangeText}
                underlineColorAndroid='transparent'
            />
        </View>
    );
}

const styles = {
    containerStyle: {
        height: 40,
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center'
    },
    labelStyle:{
        fontSize: 18,
        flex: 1,
        paddingLeft: 20
    },
    inputStyle:{
        fontSize: 18,
        paddingLeft: 5,
        paddingRight: 5,
        flex: 2,
        lineHeight: 23,
        color: '#000',
    }
};

export { Input };

谁能帮帮我？为什么输入的密码值丢失？

Answer 1

如错误所述，"firebase.auth().signInWithEmailAndPassword" 需要两个参数。将您的 loginUser 函数更改为：

export const loginUser = ({ email, password }) => dispatch => {
  firebase
    .auth()
    .signInWithEmailAndPassword( email, password )
    .then(user => {
      dispatch({ type: 'LOGIN_USER_SUCCESS', payload: user });
    });
};

Answer 2

补充一下 您收到此错误是因为您将电子邮件和密码包含在单个参数（对象）中。正如 vbandrade.

所回答的那样，这两个应该分成两个参数

PS: 此外，在您的应用中公开敏感数据不是一个好习惯，您可以阅读有关使用 react-native-dotenv[=12 的更多信息=]

输入密码中的空值 react-native redux firebase

Empty value in input password react-native redux firebase

firebase

react-native

redux

redux-thunk

react-redux