TypeError from axios get on a json endpoint

Question

I am getting the data I need from the response, but I get a TypeError and I don't understand why? What do I need to do to fix this?

  componentDidMount() {
    const getData = axios.get("https://web-code-test-xxx-games-prd.appspot.com/cards.json")
      .then(function(response) {
        const easyResponse = response.data.levels[0]['difficulty']
        const easyCards = response.data.levels[0]['cards']
        this.setState({ easy: easyResponse})
        this.setState({easyCards: easyCards})

       })
      .catch(function(error) {
        console.log(error);
      });

}

TypeError{}, I've looked around for more verbose explanations, no luck. Is it because its fetching a json? — Kevin T., Apr 12 '18 at 00:46
this is the response Object {data: Object, status: 200, statusText: "", headers: Object, config: Object…} data: Object levels: Array[2] 0: Object 1: Object status: 200 statusText: "" headers: Object config: Object request: XMLHttpRequest — Kevin T., Apr 12 '18 at 00:49

score 0 · Answer 1 · answered Apr 12 '18 at 01:44

The TypeError was not in the get request, it was coming from the Promise object that was returned. Axios is an asynchronous action and the 'this' is lost/ different inside Axios thus the 'this' in this.setState was not being read properly. By switching to an arrow function the 'this' is no longer the axios object but the context object, the react component. Here is another answer.

TypeError from axios get on a json endpoint

1 Answers1