使用提供者 ReactJS 验证表单

Question

我正在制作一个身份验证系统，但在验证输入时遇到了问题...

我有一个提供程序，它具有与 firebase 对话的登录、注册和 sigout 功能。 这里provider.js里面的登录功能

    login(email,password){
        try{
            app.auth().signInWithEmailAndPassword(email,password) //effettuo il login, se va tutto bene... then =>
            .then(() =>{
                var user = app.auth().currentUser; //prendo l'utente corrente
                user.getIdToken().then((idToken) => { //prendo l'id_token dell'utente corrente
                    this.setState({ //aggiorno lo stato
                        isAuth : true,
                        currentUser: user,
                        currentUserToken: idToken,
                        userPassword: password
                    })
                    console.log("Login: id_token corrente: ",this.state.currentUserToken)
                    localStorage.setItem('password', password)
                })

                localStorage.setItem('userLogged', JSON.stringify(user)) //aggiorno il localstorage con l'utente corrente
            })
            .catch(error => {
                if(error.code === 'auth/wrong-password' || error.code === 'auth/invalid-email') {
                    console.error("Errore nell'authenticazione: ", error.code)

                 }
            })

        }catch(e){
            alert(e)
        }
}

然后我有一个名为 LoginModal 的组件，它使用 CONTEXT API 访问登录功能

<AuthConsumer>
{({login}) => (
    <Modal open={this.state.open} toggle={this.toggle}>
    <ModalHeader>Accedi</ModalHeader>
    <ModalBody>
    <Form>
        <FormGroup>
            <label htmlFor="email">Email</label>
            <FormInput placeholder = "mariorossi@splitlabs.it" id="email" value = {this.state.LogEmail} onChange = {(e) => this.setState({logEmail: e.target.value})}/>
        </FormGroup>
        <FormGroup>
            <label htmlFor="password">Password</label>
            <FormInput placeholder = "******" type = "password" id="password" value = {this.state.LogPassword} onChange = {(e) => this.setState({logPassword: e.target.value})}/>
        </FormGroup>
    </Form>
    <Button onClick ={() => {
        login(this.state.logEmail, this.state.logPassword)


    }} outline>Accedi</Button>
    </ModalBody>
 )}
</AuthConsumer>

我的问题是，如何获取登录提供程序中发生的错误并在登录模式上显示错误？？？

Answer 1

您需要将从 Firebase 获得的错误设置为状态，然后在渲染中使用它。

所以

try{
    app.auth().signInWithEmailAndPassword(email,password)
    ...
    .catch(error => {
        if(error.code === 'auth/wrong-password' || error.code === 'auth/invalid-email') {
            console.error("Errore nell'authenticazione: ", error.code)
        }
        this.setState({ signinError: error });
    })

然后：

<AuthConsumer>
{({login}) => (
    <Modal open={this.state.open} toggle={this.toggle}>
    <ModalHeader>Accedi</ModalHeader>
    <ModalBody>
    (this.state.signinError ? <div>{this.state.signinError}</div? : "")
    <Form>
        <FormGroup>

最后一个 sn-p 中可能有一些语法错误，但我希望你明白。