Unable to set state from the response of the api

Question

I have a following function in Api.js

const _getCategories = async () => {
  var categories = [];
  let token = await getJwt();
  var config = {
    method: 'get',
    url: 'myurl',
    headers: { 
      'Authorization': 'Bearer' + ' ' + token
    },
    data : ''
  };
  
  axios(config)
  .then(function (response) {
    if(response.status == 200)
    {
      let res = response.data;
     // Create a variable having name in the list.
       categories = res.data.apps.map(function(item) {
         return {
           title: item.name,
           color: AppStyles.colorSet.analyticsColor,
           lightColor: AppStyles.colorSet.analyticsLightColor,
           icon: AppStyles.iconSet.analytics
         };
       });
      // console.log('Returning Categories');
       console.log(categories);
       return categories;
       //console.log(data1)
      // Handle and fetch the list of apps
    }
    else 
    {
      // API didn't go through, generate the error functions 
    }
    
  })
  .catch(function (error) {
    console.log(error);
  });
  
  
};

and I am loading it in homscreen.js

class DashboardScreen extends React.Component {

  constructor(props) {
    super(props);
    

    const { navigation } = props;
    navigation.setOptions({
      title: 'Dashboard',
      headerLeft: () => (
        <TouchableOpacity
          onPress={() => {
            navigation.openDrawer();
          }}
        >
          <Icon
            style={AppStyles.styleSet.menuButton}
            name="ios-menu"
            size={AppStyles.iconSizeSet.normal}
            color={AppStyles.colorSet.mainThemeForegroundColor}
          />
        </TouchableOpacity>
      ),
    });
    this.state = {
      categories: [],
    };
  }
componentDidMount() {
    if (!this.state.data) {
        Api.getCategories().then(data => console.log("The data is "+data))
                      .catch(err => { /*...handle the error...*/});
    } 
}

  onPressCategory = item => {
    // Handle onpress for the items
  };

  render() {
    //console.log(this.state.categories);
    categoryButtonsRow1 = this.state.categories.map((item, index) => {
      if (index < 3) {
        return (
          <CategoryButton
            onPress={() => this.onPressCategory(item)}
            color={item.color}
            lightColor={item.lightColor}
            icon={item.icon}
            title={item.title}
          />
        );
      }
    });
    return (
      <ScrollView style={styles.container}>
        <View style={styles.row}>{categoryButtonsRow1}</View>
      </ScrollView>
    );
  }
}

But I am getting category as undefined while printing in render().

I even tried to create an async function in the homescreen.js and call the api with await and set the state after the same but still it is coming as undefined.

Any guesses to what I am doing wrong here. Can anyone help with the same. My best guess is that I am not handling the api request properly.

EDIT I tried Use Async/Await with Axios in React.js but it is still printing undefined to the same.

Does this answer your question? [Use Async/Await with Axios in React.js](https://stackoverflow.com/questions/46733354/use-async-await-with-axios-in-react-js) — Guruparan Giritharan, Nov 11 '20 at 05:14
@GuruparanGiritharan I tried this, but I still am getting undefined while setting the state. Here is the code that I tried. `componentDidMount() { if (!this.state.data) { Api.getCategories().then(data => console.log("The data is "+data)) .catch(err => { /*...handle the error...*/}); } }` — dper, Nov 11 '20 at 05:30
@GuruparanGiritharan I am using the same as shown in api.js as well. — dper, Nov 11 '20 at 05:35
the api method, try returning return axios(config); and try with the same code as your comment with componentDidMount — Guruparan Giritharan, Nov 11 '20 at 05:39
@GuruparanGiritharan It returns me on the logs as " The data is [object Object] " — dper, Nov 11 '20 at 05:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224395/discussion-between-dper-and-guruparan-giritharan). — dper, Nov 11 '20 at 05:42

score 2 · Accepted Answer · answered Nov 11 '20 at 06:08

The reason for getting undefined is the _getCategories is that its not returning anything and you are chaining using .then to get data so the caller has no way to get this data as a callback is not passed.

You can change the to await like this

const _getCategories = async () => {
  var categories = [];
  let token = await getJwt();
  var config = {
    method: 'get',
    url: 'myurl',
    headers: {
      Authorization: 'Bearer' + ' ' + token,
    },
    data: '',
  };

  const response = await axios(config);
  if (response.status == 200) {
    let res = response.data;
    // Create a variable having name in the list.
    categories = res.data.apps.map(function (item) {
      return {
        title: item.name,
        color: AppStyles.colorSet.analyticsColor,
        lightColor: AppStyles.colorSet.analyticsLightColor,
        icon: AppStyles.iconSet.analytics,
      };
    });
    // console.log('Returning Categories');
    console.log(categories);
    return categories;
    //console.log(data1)
    // Handle and fetch the list of apps
  } else {
    // API didn't go through, generate the error functions
    return null;
  }
};

And you can set the state in componentDidMount (should be async)

this.setState({categories:await api._getCategories()});

Unable to set state from the response of the api

1 Answers1