Реагировать JS сделать асинхронный вызов без componentdidmount ()

Question

Я пытаюсь выполнить вызов API, инициируемый только тогда, когда пользователь нажимает кнопку отправки

Это происходит в контексте входа пользователя в систему, где изменяется состояние компонента родителя.

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

Мой вопрос: можно ли сделать что-то подобное или мне абсолютно необходимо использовать componentDidMount()?

Я слишком долго боролся с этим / искал это и до сих пор не могу найтиспособ заставить это работать.

Answer 1

Это возможно сделать.Из того, что я вижу, у вас возникают проблемы, когда вы достигаете //check if user is authentificated.Это происходит потому, что setState реакции реагирует на асинхронность.

Чтобы получить доступ к состоянию сразу после его изменения, функция setState принимает дополнительную функцию обратного вызова, поэтому вы можете попробовать написать свой код следующим образом:

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