在 React 中提交表单后呈现错误消息

Question

I'm still new to React, so got stuck on this and can't get my head around it. I am building a login form and want to display an error message if the autentication fails. I have created a state variable which would contain the error message and use handleSubmit function to call the "login" function.

Here is my Login component:

import React from 'react'
import {auth} from './Functions.js';


class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      pass: '',
      error: null
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange (e) {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  }

  handleSubmit(e) {
    e.preventDefault();
    var response = auth.login(this.state);
    if(!response){
      this.setState({error : auth.error});
    }
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {this.state.error != null && <p>{this.state.error}</p> }
        <input type="text" name="email" onChange={this.handleChange}/>
        <input type="text" name="pass" onChange={this.handleChange}/>
        <button type="submit">Login</button>
      </form>
    );
  }
}

export default Login;

The login function is in the Functions.js file (which works in returning the error message):

export const auth = {
    login,
    error: null,
  }

function login( data ){
  if(data.email === 'test@test.com'){
    return true;
  }else{
    auth.error = 'error message';
    return false;
  }
}

However - as I am using Firebase authorization, the login function looks like this, so when I get an error back - it does not get displayed to the user (not until I click on the login button more than once):

function login( data ){
    Firebase.auth().signInWithEmailAndPassword(data.email, data.password)
    .then(function(result) {    
      return true;
    }).catch(function(error) {
      auth.error = error.message;
      return false;
    });
}

Any ideas why this might be happening?

Answer 1

you need to handle the auth.login function asynchronously with.then and.catch. Asynchronous code is contagious - When one function is asynchronous the whole chain of functions call becomes asynchronous and needs to be handle accordingly.

Answer 2

The login function is an asynchronous function when you changed it to use Firebase authentication. So when doing this:

handleSubmit(e) {
    e.preventDefault();
    var response = auth.login(this.state); // this will be an asynchronous function which means the response will not come instantly.
  }

Change the function to

handleSubmit = async (e) => {
var response = await auth.login(this.state); // check the form of response that would return from firebase and accordingly catch the error.
if(!response){
  this.setState({error : auth.error});
}}