Реагируй аксиосами получи метод

Question

Я пытаюсь прочитать значение axios.get(), вызывающего переменную flag (вывод либо true, либо false).

Я создаю приложение springboot + reactjs.

Требование этого кода / Требуемый поток кода:

Шаг 1: введите имя пользователя и пароль

Шаг 2: при нажатии кнопки отправки необходимо вызвать метод handleChange ()

Шаг 3: В методе изменения дескриптора он должен вызвать метод callFunction ().

Шаг 4: он должен получить данные с сервера, а затем перейти к «ТОЧНОМУ БЛОКУ», где ответ печатается в консоли, и затем выдается предупреждение, а затем возвращается значение для обработки метода изменения, после чего другойоповещение дается.Но на шаге 4 «THEN BLOCK» не выполняется, и он просто переходит, поэтому значение в методе handleChange () не определено.Но после того, как весь процесс завершен, наконец выполняется блок THEN.

Можете ли вы сказать, в чем проблема и чего мне не хватает, мне требуется вывод:

1.response.Data (которая является истинной или ложной, которую я получаю при получении http-вызова) в консоли

2.alert, в которой отображается response.data

Возвращаемое значение

В консоли -> response.data (true или false) - это ответ

5.alert (вы ввели имя пользователя:Shaik и пароль: ****)

Токовый выход, который я получаю:

1. В консоли -> "undefined" - этоответ

2.alert (вы ввели имя пользователя: shaik и пароль: ****)

3.response.Data (либо true, либо false, которые я получаю при получении http-вызова) в консоли

4.alert окно, отображающее response.data

import React, { Component } from 'react';

import './App.css';
import axios from 'axios';

class Login extends Component {

    constructor(props) {
        super(props);

        this.state = {
            userName: '',
            password: ''
        };
        this.updateState = this.updateState.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.callFuction = this.callFuction.bind(this);
    }

    updateState(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }
    handleChange = (event) => {
        debugger;
        var flag = this.callFuction();

        console.log(flag +"is the response")
        alert("You have entered : \n User Name :" + this.state.userName + " \n Password :" + this.state.password);

        event.preventDefault();
    }

    callFuction(){
        debugger;   
          axios.get('http://localhost:8086/login/check?userName='+this.state.userName+'&password='+this.state.password ).then(response => {
            debugger;
            console.log(response.data);    
            alert(response.data);
            return response.data;
            });
    }
    render() {
        return (

            <form >
                <label>User Name:
                <input type="text" name ="userName"  onChange={this.updateState} />
                </label>
                <label>Password:
                <input type="password" name = "password" onChange={this.updateState} />
                </label>

                <input type="submit" value="Submit" onClick={this.handleChange} />
            </form>
        )
    }
}

export default Login;

Answer 1

Вы получаете undefined, потому что вы ничего не возвращаете из вашего callFunction, вы должны вернуть результат axios get, но он вернет обещание, поэтому вы должны установить флаг после разрешения promise.

Вот краткий пример:

 handleChange = (event) => {
    this.callFunction()
      .then(flag => {
         console.log(flag +" is the response")
    alert("You have entered : \n User Name :" + this.state.userName + " \n Password :" + this.state.password);
      });


    event.preventDefault();
}

callFuction(){  
      return axios.get('http://localhost:8086/login/check?userName='+this.state.userName+'&password='+this.state.password ).then(response => {
        return response.data;
        });
}