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

【问题标题】：Empty value in input password react-native redux firebase输入密码中的空值 react-native redux firebase
【发布时间】：2018-01-12 04:43:08
【问题描述】：

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

signInWithEmailAndPassword 失败：预期 2 个参数但得到 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 };

谁能帮帮我？为什么缺少输入的密码值？

【问题讨论】：

标签： firebase react-native redux react-redux redux-thunk

【解决方案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 });
    });
};

【讨论】：

我做到了，这就是我得到的：signInWithEmailAndPassword failed: First argument "email" must be a valid string.
似乎您需要检查您传递的电子邮件。再次阅读错误信息。

【解决方案2】：

只是为了添加 您收到此错误是因为您将电子邮件和密码包含在一个参数（一个对象）中。正如vbandrade 所回答的那样，这两者应分为两个参数。

PS：另外，在你的应用中暴露敏感数据不是一个好习惯，你可以阅读更多关于使用react-native-dotenv

【讨论】：