Axios data being returned, but calling code not working

Question

Thanks in advance for reading. I am realtively new to the react and es6 world. I had a working component that used axios to call an api. All good. Re-engineered it to put redundant api call code into a utils and call it from anywhere that needs data. But I cannot figure out why this function call isn't working. Anyone see what I am missing?

Here is the utility function:

import Axios from 'axios';

export function getData(strPath){
    var sendToken = {
      headers: {'Authorization': 'Token tokenHere'}
    };
    var sendPath = "http://pathHere.com/api/" + strPath

  Axios
    .get(sendPath,sendToken)

    .catch(function (error) {
      //error handling here
      })
    .then(function (response) {
      console.log(response.data.results) //outputs my array of 2 elements
      return(response.data.results);
    })
};

Here is the calling react component:

import React, { Component } from 'react';
import { getData } from './Utils';

class BoardContainer extends React.Component {
  constructor(props){
    super(props);
    this.state = { positions: [] };
  }

  componentWillMount(){
    var x = getData('positions');  //simplified code for debugging and example
    console.log(x);  //ISSUE: x is undefined
  }

  render() {
    return(
      <div>Testing Rendering Board Container
        //rendering code would be here (child component call)
      </div>
    )
  }
}

Your getData function does not return anything. You return inside the .then callback, but that is not the same thing. — loganfsmyth
– loganfsmyth, Commented Dec 23, 2016 at 20:39
My API call returns the two rows of data, as expected. When I log response.data.results I get my database data. I used sample/fake api because I knew that was not the issue. — tigerMike
– tigerMike, Commented Dec 26, 2016 at 17:20

Thanh Nguyen · Accepted Answer · 2017-01-08 03:44:07Z

2

Utility:

import Axios from 'axios'

export function getData(strPath){
    const sendToken = {
      headers: {'Authorization': 'Token tokenHere'}
    }
    const sendPath = "http://pathHere.com/api/" + strPath
    return Axios.get(sendPath, sendToken)    
};

Component:

import React, { Component } from 'react'
import { getData } from './Utils'

class BoardContainer extends React.Component {
  constructor(props){
    super(props);
    this.state = { positions: [] }
  }

  componentWillMount(){
    getData('positions').then((response) => {
        console.log(response)
    }).catch((error) => {
        console.log(error)
    })     
  }

  render() {
    return(
      <div>Testing Rendering Board Container
        //rendering code would be here (child component call)
      </div>
    )
  }
}

edited Jan 8, 2017 at 3:44

answered Dec 23, 2016 at 17:49

Thanh Nguyen

5,36212 gold badges45 silver badges76 bronze badges

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

1 Comment

tigerMike Over a year ago

Thanks Nguyen, need to work on those arrow functions!

Collectives™ on Stack Overflow

Axios data being returned, but calling code not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related