This question has already been answered:

Can you please tell how to synchronously write an object to a variable in React and immediately get it back?

For example, my react application communicates with the server and receives json data from it with different states. Based on these states, the logic of my application is built. The problem is that after receiving the response from the server and writing it to a variable, it is not possible to get this value - it is 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); }

Thus, by clicking on the Submit button, a function is called that receives JSON data. Data Axios and is displayed in the console inside the Axios . This data should then be written to this.axiosData . But, as I understand it, due to the fact that the Javascript language is asynchronous, this data falls into this variable later. Therefore, inside the handleSubmit() in my undefinded . When I click the Submit button again, I see this data.

Link to an example: https://codesandbox.io/s/v6k22wx3y0

Reported as a duplicate by members of Pavel Mayorov , Community Spirit ♦ Jan. 22 at 11:31 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    Synchronously do not work, but you can use 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);