React js cant interpret axios call the right way, data is undefined

Question

When I perform a REST call (get) with axios from my react app, it says that the response is undefined. But when I try to do the same call in Postman, it clearly gives the right response. React cannot get the right response. How do I resolve this problem?

Response gives 'undefined' and response.data also gives 'undefined'.

class Blogpost extends React. Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

componentDidMount() {
const response = axios.get({
      URL: 'http://178.62.198.162/api/posts',
      headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
    })
    const items = response.data;
    this.setState({
      isLoaded: false,
      items: items,
    });
    console.log(this.items);
  }

render() {
    const {error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {this.items.map(item => (
            <li key={item.name}>
            {item.name}
            </li>
          ))}
        </ul>
      );
    }
  }
}

The expected result would be an array of collections. But actually it is given back 'undefined'.

How can I make it work so response gives the right array?

EDIT There seems to be a problem with the GET request. The promise gets rejected with fail code 404.

componentDidMount() {
const response = axios.get({
  URL: 'http://178.62.198.162/api/posts',
  headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
})
response.catch((error) => {
  console.log(error)
});

}

Is this a problem on the server side, or on the client side and how do I resolve it?

Hi Nynke! sarabs3 and I both provided answers for you to solve this problem. Honestly, both should work. Let us know if you have any questions. — Cat_Enthusiast
– Cat_Enthusiast, Commented May 9, 2019 at 9:30
Hi Christopher, There seems to be a problem with the promise. It gets rejected with fail code 404. I do not know if this is a server side problem or client side. Also because the call seems to work just fine in postman... — Nynke
– Nynke, Commented May 9, 2019 at 10:05

sarabs3 · Accepted Answer · 2019-05-09 09:12:21Z

1

You are using axios wrong way. Axios always returns a Promise object.

Change your code to following and it will work.

componentDidMount() {
const response = axios.get({
      URL: 'http://178.62.198.162/api/posts',
      headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
    })
    response.then((res) => {
      const items = res.data;
      this.setState({
        isLoaded: false,
        items: items,
      });
      console.log(this.items);
    }
})

  }

You can read more about Promises here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

answered May 9, 2019 at 9:12

sarabs3

5947 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sarabs3 Over a year ago

Hi Nynke, As your API is giving 404 error, you have already used catch() method of promise. that will handle the UI. and 404 error is basically either you are not calling the API endpoint currently or your server is not running. e.g. http://178.62.198.162/api/posts this link is not working. Not an issue with frontend

Mehrnoosh · Accepted Answer · 2020-02-14 17:12:53Z

1

you should use async/await syntax to make sure response variable will be filled with right http get response before initializing

async componentDidMount() { 
  const response = await axios.get({
    URL: 'http://178.62.198.162/api/posts',
    headers: {'token' : 'pj11daaQRz7zUIH56B9Z'}
  })
  const items = response.data;
  this.setState({
  isLoaded: false,
  items: items,
});
}

answered Feb 14, 2020 at 17:12

Mehrnoosh

1211 silver badge7 bronze badges

Collectives™ on Stack Overflow

React js cant interpret axios call the right way, data is undefined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related