Javascript React Firebase-未捕获异常标志使用email和Password，电子邮件必须是有效字符串

各位开发者好。我正在学习React，但对JS知之甚少（是的，我知道这是一个愚蠢的决定），目的是了解React是什么

我开始跟踪这家伙的建筑工程。我发现了一些教程过时的情况，但我已经设法纠正了这些情况

现在，我偶然发现了一个许多人都遇到过的问题，但是解决方案对于人们编写的代码来说非常具体。我浏览了很多这样的帖子，也浏览了Firebase文档，还向开发人员的同事寻求帮助

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

未捕获异常：错误登录WithEmailAndPassword失败：第一个参数“email”必须是有效字符串

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

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

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)

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

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

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

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)

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

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

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

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)

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

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

我上传了（我认为）与问题相关的代码。另外，请原谅缺少大括号，我发现连接多行代码（包括空行）很困难

---

感谢您的支持

此代码中存在问题：

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

将此更改为：

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

---

您创建了一个密码和电子邮件凭据值数组

您可以尝试的第一件事是在调用登录功能之前，

console.log（credentials.email）

并查看它是否正确。这是一个好问题。我没有明显的错误。正如technophyle所说，最好在请求本身之前记录实际发送到外部api的内容。如果结果是未定义的，我将开始检查我丢失凭据的位置。状态是否正确更新？