React: this is not defined in async callback function

Question

I have been on this for long now please I need assistance. Am trying to make a call to an API link and I have an array of data to make the call as parameters to the call. And After the call has been made I want to set the component state to the result gotten.

let animals = ['cats','goats'] ;
async.each(animals, function(item, cb){
  axios.get(`http://api.com?keyword=${item}`)
    .then(res=> {
        apiData.push(res.data)
        this.setState({
          stateData: apiData 
        });
     });
   })

Answer 1

async.each only makes sense if you want to execute one request after another, and then you have to call cb() so that the chain continues:

 async.each(array, (item, cb) => { // <- arrow func!
   axios.get(`/http://api.com?keyword=${item}`)
   .then(res => {
     apiData.push(res.data);
     this.setState({ stateData: apiData });
     cb(); // <---
   });
});

Or to execute all in parallel (which is probably much faster):

 const promises = array.map(item => axios.get(`/http://api.com?keyword=${item}`).then(res => res.data));

 Promise.all(promises).then(stateData => {
   this.setState({ stateData });
 });

PS: You should always handle errors in a promise, so just attach a .catch(/*..*/) to the chain ...,

Answer 2

Use arrow function for both forEach and api request callback, that will prevent javascript re-assigning the value of this during your callback chain.

More info about arrow functions in ES6 read: https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc