-1

Подскажите, пожалуйста, как в React синхронно записать объект в переменную и тут же получить ее обратно?

Например, мое react приложение общается с сервером и получает от него json данные с разными состояниями. На основе этих состояний строится логика моего приложения. Проблема заключается в том, чтобы после получения от сервера ответа и записи ее в переменную, не удается получить это значение - оно undefinded. 

  constructor(props) {
    super(props);

    this.state = {
      input: "",
    };

    this.axiosData = {}
  }

  getServerDataGET = async (value) => {
       axios
      .get("/test.json")
      .then(res => {
        //console.log(res.data);
        this.axiosData = res.data;
      })
      .catch(err => { });
  };

  handleChange = event => {
    this.setState({ input: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    this.getServerDataGET();
    console.log(this.axiosData);
  }

Таким образом, нажимая на кнопку Submit, вызывается функция, которая получает JSON данные. Данные приходят и отображаются в консоль внутри Axios. Затем эти данные должны записываются в this.axiosData. Но, как я понимаю, в силу того, что Javascript язык асинхронный эти данные попадают в эту переменную позже. Поэтому внутри handleSubmit() в консоле у меня undefinded. При повторном нажатии на кнопку Submit я эти данные вижу.

Ссылка на пример: https://codesandbox.io/s/v6k22wx3y0

Pavel
  • 1,354

1 Answers1

-1

Синхронно сделать не получится, но можно воспользоваться Promise

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

class Test extends React.Component {
  constructor(props) {
    super(props);


this.state = {
  input: '',
};

this.axiosData = {}



}


getServerDataGET = (value) => new Promise((resolve, reject) => 
    axios.get('/test.json')
      .then((res) => {
        resolve(res.data);
      })
      .catch(reject)
  );


handleChange = event => {
    this.setState({ input: event.target.value });
  };


handleSubmit = event => {
    event.preventDefault();
    this.getServerDataGET().then((data) => {
      this.axiosData = data;
      console.log(this.axiosData);
    });
  }


render() {
    return (
      <div>
        <div>
          <input
            type="text"
            name="input"
            placeholder=""
            onChange={this.handleChange}
            value={this.state.input}
          />
        </div>
        <div>
          <button onClick={this.handleSubmit}>
            <span>Продолжить</span>
          </button>
        </div>
      </div>
    );
  }
};


const rootElement = document.getElementById("root");
ReactDOM.render(<Test />, rootElement);
Volodymyr
  • 1,717