React JS make async call without componentdidmount()

Question

I'm trying to do an API call triggered only when the user clicks on the submit button

This is in a user login context where the parent's component state gets changed.

import React from 'react';
import {Button, FormGroup, FormControl, ControlLabel} from "react-bootstrap";
import './login.css';

export default class loginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      answer:[],
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  async handleSubmit(event) { 
    const jso = JSON.stringify({
      username: this.state.username,
      password: this.state.password
    })
    const response = await fetch("https://app.herokuapp.com/authentication", {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: jso,
    })

    const json = await response.json()
       
    this.setState({answer:json});

    //check if user is authentificated
    alert("Server Answer : "+ this.state.answer.answer);
    if(this.state.answer.answer.localeCompare('true') == 0){
      this.props.app.setState({auth: true});
      sessionStorage.setItem('auth', true);
    }
    else if (this.state.username != ""){
      alert("INCORRECT USERNAME PASSWORD ");
    }
  }


  render() {
    
    return (<div className="Login">
      <form onSubmit={this.handleSubmit}>
        //part omitted because not relevant for this question
        <Button bsSize="small" color="primary" type="submit">
          Login
        </Button >
      </form>
    </div>)
  }
}

My question: Is it possible to do something like this or I absolutely need to use componentDidMount() ?

I've been struggling / searching about this for too much time now and I still can't find a way to make it work.

In this case, you should use promise instead async/await

san
– san

2018-10-03 03:50:21 +00:00
Commented Oct 3, 2018 at 3:50 — san
– san, Commented Oct 3, 2018 at 3:50

Emmanuel Argollo · Accepted Answer · 2018-10-03 03:53:36Z

1

It is possible to do this. From what I can see, you're having problems once you reach the //check if user is authentificated. This happens because react's setState is asynchronous.

In order to access the state right after it's modified, the setState function takes an optional callback function, sou you could try writing your code like this:

this.setState({answer:json}, () => {
    //check if user is authentificated
    alert("Server Answer : "+ this.state.answer.answer);
    if(this.state.answer.answer.localeCompare('true') == 0){
      this.props.app.setState({auth: true});
      sessionStorage.setItem('auth', true);
    }
    else if (this.state.username != ""){
      alert("INCORRECT USERNAME PASSWORD ");
    }
});

answered Oct 3, 2018 at 3:53

Emmanuel Argollo

716 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

etiennnr Over a year ago

Thanks for the answer! However, it only works 1 out of 10 times.... Which means I still have a asynchronous call problem... Do you think promise may be better ?

Emmanuel Argollo Over a year ago

It's definitelly worth a try, I'd say. I can't really see what else could be the problem though...

Collectives™ on Stack Overflow

React JS make async call without componentdidmount()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related