How to set state of response from axios in react

How do I set the state of a get response in axios?

axios.get(response){
    this.setState({events: response.data})
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You have a syntax error here. You should try this instead

var self = this;
axios.get('/url')
 .then(function (response) {
   console.log(response);
   self.setState({events: response.data})
 })
.catch(function (error) {
   console.log(error);
});
//the rest of the code
var a = 'i might be executed before the server responds'

There are a few things to note here:

• axios.get is an asynchronous function which means that the rest of the code will be executed .And when the response of the server arrives, the function passed to then will be executed. The return value of axios.get('url') is called a promise object. You can read more about it here
• this keyword has a different value depending of where it is called. this in this.setState should refer to the constructor object, and when you call this inside a function, it refers to the window object. That is why i assigned this to the variable self. You can read more about this here

Pro tip:

If you use ES6, you would want to use arrow functions (which don’t have their own this) and use this.setState without assigning this to a variable. more about it here

    axios.get('/url')
     .then((response) => {
       console.log(response);
       this.setState({events: response.data})
     })
    .catch((error)=>{
       console.log(error);
    });

Here is a complete example https://codesandbox.io/s/rm4pyq9m0o containing best practices commonly used to fetch data including error handling, try again and loading. This provides a better User experience. You are encouraged to modify the code and play around to get more insights about it.

Method 2

This isn’t working because “this” is different inside of axios. “this” inside axios refers to the axios object, not your react component. You can resolve this with .bind

Also axios isnt being used properly.

it should look something like

axios.get("/yourURL").then(function(response) {
  this.setState({ events: response.data });
}.bind(this));

Alternatively if using es6 you could sub out the function for an arrow function and get the same effect without bind

axios.get("/yourURL").then(response => {
  this.setState({ events: response.data });
});

Method 3

Simply try this node js

      axios.get(`https://jsonplaceholder.typicode.com/users`)
       .then(res => {
          const persons = res.data;
          this.setState({ persons });
      })

if you are using react js then you first import in component than use axios

like this:

import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Method 4

I have dealt with promises similar to that in the past when I was learning react. What I did was put the api call on the componentDidMount method and set the state to an initial value. I used a loader while the data was being fetched.

componentDidMount() {
 const self = this;
 axios.get(response){
  self.setState({ events: response.data });
}

As of now, I would use something similar to what checkenrode said.

Method 5

Do something like this:

  var self= this; // self will now be referred to your component

  axios.get("http://localhost:3001/get_user?id=" + id)
  .then(function (response) {
    if(response.data.rows != null)
    user_detail = response.data.rows;
    console.log(response);
    self.setState({email: user_detail.name, name: user_detail.name})
  })

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0