Адрес электронной почты плохо отформатирован - реагирует на родной, firebase и redux - PullRequest
0 голосов
/ 29 ноября 2018

Я пытаюсь войти в систему, используя FireBase и Redux в реагировать родной.Но выдает ошибку «Адрес электронной почты плохо отформатирован».Если я отклоняю ошибку и все равно даю адрес электронной почты и пароль, выдается сообщение об ошибке «Пароль недействителен или у пользователя нет пароля».В чем может быть проблема здесь?

Если часть Firebase удалена, приложение работает отлично.Входные данные работают как обычно.

Посмотрите видео здесь

Код:

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import LoginForm from './src/components/LoginForm';
import firebase from '@firebase/app';
import '@firebase/auth';

export default class App extends Component<Props> {
  componentWillMount() {
    const config = {
      apiKey: 'xxxxxxxxxxxxxxx',
      authDomain: 'xxxxxxxxxxxxxxx',
      databaseURL: 'xxxxxxxxxxxxxxx',
      storageBucket: 'xxxxxxxxxxxxxxx',
      messagingSenderId: 'xxxxxxxxxxxxxxx'
    };

    firebase.initializeApp(config);
  }

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

Создатели действий

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

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 }) => {
  return (dispatch) => {
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(user => {
        dispatch({ type: 'LOGIN_USER_SUCCESS', payload: user });
    });
  };
};

LoginForm.js

import React, { Component } from 'react';
import { } from 'react-native';
import { connect } from 'react-redux';
import { Input, Button, Card, CardSection } from './common';
import { emailChanged, passwordChanged, loginUser } from '../actions';
import firebase from '@firebase/app';
import '@firebase/auth';

type Props = {};
class LoginForm extends Component<Props> {

  onEmailChangeText = (text) => {
   this.props.emailChanged(text);
  }

  onPasswordChangeText = (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@gmail.com'
              onChangeText={(text) => this.onEmailChangeText(text)}
              value={this.props.email}
            />
        </CardSection>

        <CardSection>
            <Input
              label='Password'
              placeholder='Password'
              secureTextEntry
              onChangeText={(text) => this.onPasswordChangeText(text)}
              value={this.props.password}
            />
        </CardSection>

        <CardSection>
            <Button onPress={this.onButtonPress()}>
              Login
            </Button>
        </CardSection>

      </Card>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('mapStateToProps', state.auth);
  return { email: state.auth.email, password: state.auth.password, delete: state.auth.delete };
};

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

Редуктор:

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

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

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