javascript - React Firebase - 未捕获异常 signInWithEmailAndPassword，电子邮件必须是有效字符串

Question

各位开发者大家好。我正在学习 React，但对 JS 了解不多(是的，我知道这是一个愚蠢的决定)，目的是了解 React 是什么。

我已经开始关注这个人的 tutorial在 build 东西上。我发现了几个教程过时的案例，但我已经设法纠正了这些问题。

现在我偶然发现了一个很多人都遇到过的问题，但解决方案却非常具体地针对人们编写的代码。我浏览了许多 SO 帖子，还查看了 Firebase 文档，并向开发同事寻求帮助。

问题是当我输入正确登录凭据并按下按钮时，出现错误:

"Uncaught exception:Error signInWithEmailAndPassword failed: First argument “email” must be a valid string".

我尝试了不同的方法来解决这个问题，例如返回新的 promise ，如下所示，返回异步函数。

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

LogIn.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
  })
}``

您将密码和电子邮件凭据的值组成了一个数组