React Firebase - Uncaught исключение signInWithEmailAndPassword, адрес электронной почты должен быть допустимой строкой

Question

Приветствую коллег разработчиков. Я изучаю React без особых знаний о JS (да, я знаю, что это глупое решение), чтобы понять, что такое React.

Я начал следить за тем, что у этого парня учебник по созданию вещей. Я обнаружил несколько случаев, когда учебник устарел, но мне удалось это исправить.

Теперь я наткнулся на проблему, с которой столкнулись многие люди, но ее решения были очень специфичны c для написанного людьми кода. Я просмотрел множество SO-сообщений, также просматривал документы Firebase, а также обращался за помощью к коллегам по разработке.

Проблема заключается в том, что я ввожу правильные учетные данные для входа и нажимаю При нажатии кнопки появляется сообщение об ошибке:

«Неопределенное исключение: ошибка signInWithEmailAndPassword не выполнена: первый аргумент« email »должен быть допустимой строкой».

Я пробовал разные способы борьбы с этим, например, возвращение нового обещания и, как показано ниже, возвращение функции asyn c.

authAction. js

export const logIn = (credentials) => {
console.log("Login attempt, login authActions");
return async (dispatch, getState) => {
    firebase.auth().signInWithEmailAndPassword(
        credentials.email,
        credentials.password
    ).then(() => {
        console.log("Login Successful")
        dispatch({ type: 'LOGIN_SUCCESS'})
    }).catch((err) => {
        console.log(err)
        dispatch({ type: 'LOGIN_ERROR', err})
    })
};

Вход в систему . js

class LogIn extends Component {
state = {
    email: '',
    password: ''
}

handleChange = (e) => {
    this.setState({
        [e.target.id] : [e.target.value]
    })
}

handleSubmit = (e) => {
    e.preventDefault();
    this.props.logIn(this.state);
}
render() {
    const { authError, auth } = this.props;

    if(auth.uid) return <Redirect to='/'/>

    return (
        <div className="container">
            <form className="white" onSubmit={this.handleSubmit}>
                <h5 className="grey-text text-darker-3">Login</h5>
                <div className="input-field">
                    <label htmlFor="email">Email</label>
                    <input type="email" id="email" onChange={this.handleChange}/>
                </div>
                <div className="input-field">
                    <label htmlFor="password">Password</label>
                    <input type="password" id="password" onChange={this.handleChange}/>
                </div>
                <div className="input-field">
                    <button className="btn pink lighten-1 z-depth-0">Login</button>
                    <div className="red-text center">
                    { authError ? (<p>{ authError }</p>) : (null) }
                    </div>
                </div>
            </form>
        </div>
    )
}

const mapStateToProps = (state) => {
console.log("Loggin attempt, stateToProps");
return{
    authError: state.auth.authError,
    auth: state.firebase.auth
}
const mapDispatchToProps = (dispatch) => {
return {
    logIn: (credentials) => dispatch(logIn(credentials))
}

export default connect(mapStateToProps, mapDispatchToProps)(LogIn)

authReducer

const initState = {
authError: null

const authReducer = (state = initState, action) => {
switch(action.type) {
    case 'LOGIN_ERROR' :
        console.log("LOGIN ERROR .....");
        return {
            ...state,
            authError: 'Login failed'
        }
    case 'LOGIN_SUCCESS' :
        console.log(' login successful');
        return {
            ...state,
            authError : null
        }
    case 'LOGOUT_SUCCESS' :
        console.log("logout completed");
        return {
            state
        }
    default :
        return state;
}
export default authReducer

index. js

const store = createStore(
rootReducer,
compose(applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
reduxFirestore(firebase, fbConfig)
)
);

const rrfProps = {
    firebase,
    config: fbConfig,
    dispatch: store.dispatch,
    createFirestoreInstance
  };

Я загрузил код, который (я думаю) имеет отношение к проблеме. Также прошу прощения за отсутствующие скобки, мне было сложно соединить несколько строк кода, включая пустые строки.

Спасибо за поддержку заранее!

Answer 1

Проблема в этом коде:

``handleChange = (e) => {
  this.setState({
   [e.target.id] : [e.target.value]
   })
}``

Измените это на:

``handleChange = (e) => {
    this.setState({
    [e.target.id] : e.target.value
  })
}``

Вы создали массив значений вашего пароля и учетных данных электронной почты