axios.get ERROR on using axios.create method by using baseUrl

Question

I tried to create an application from an Random user API in react and I used axios library for HTTP Requests.I created a separate file for base API using axios.create and the file code goes as,

import axios from 'axios'

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com`,
});

Then I used this in another file to make an GET request and store the data in state on componentdidMount so ill can access the data in UI.

import React from "react";
import API from "../api";
export default class PersonList extends React.Component {
  state = {
    persons: []
  };
  componentDidMount() {
    API
      .get('/').then((data) => {
      const persons = data.data;
      this.setState({ persons });
      console.log(this.state.persons);
    });
  }
  render() {
    const { persons } = this.state;
    console.log('Stato',persons)
    return (
      <ul>
        {persons.map((person) => (
          <li key={person.id}>{person.name}</li>
        ))}
      </ul>
    );
  }
}

But it doesn't work ,because the state is not filled up with Users data,so the .map() function is throwing an error.

sammyt · Accepted Answer · 2020-12-09 16:50:37Z

1

You're encountering this error because of the URL you are using. In your example, you use https://jsonplaceholder.typicode.com as the endpoint in componentDidMount, but that isn't going to return any placeholder user data. I believe you meant to use https://jsonplaceholder.typicode.com/users instead.

I have a working example here: https://codesandbox.io/s/axios-instance-ki9g6. Notice how I only had to change / in componentDidMount to /users.

answered Dec 9, 2020 at 16:50

sammyt

3312 silver badges10 bronze badges

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

2 Comments

sammyt Over a year ago

As a follow up suggestion, using something like lodash or ramda can help clean up the errors thrown by map if the list you're trying to iterate over doesn't have the shape you expect. This doesn't fix your real issue, of course, but it can cut down on the type of errors that blow up in your face. I'll update my sandbox accordingly to show an example of this.

sammyt Over a year ago

No problem. Glad I could help!

Collectives™ on Stack Overflow

axios.get ERROR on using axios.create method by using baseUrl

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related