How to solve "this is undefined" after mapping

Question

I'm using a custom API to fetch data. I have an object that contains each data to be fetched, so everything is dynamic. At the point had to fetch data using the fetch() function. Now a request is been made when the component is mounted (componentDidMount). Since I'm using an object to fetch for each Json data, I'll have to map this object.

componentDidMount(){
    CATEGORIES.map(function(category){
        this.fetchApiData(category.key);
    });
}

Now I have defined my fetchApiData() properly. It actually works without mapping but doesn't when I map the object.

score 1 · Accepted Answer · edited Dec 27 '17 at 12:41

1

You are trying to access this inside of another function which does not have access to fetchApiData property. To use the enclosing context, use fat-arrow based function:

componentDidMount(){
    CATEGORIES.map((category) => {
        this.fetchApiData(category.key);
    });
}

edited Dec 27 '17 at 12:41

Sunny R Gupta

5,026
1
31
40

answered Dec 27 '17 at 10:31

Spider

140
6

1

Well … that's a game of spot-the-difference. What did you change? Why should it solve the problem? – Quentin Dec 27 '17 at 10:34
@Quentin the arrow function keeps the context bound to `this`, the original questions uses a normal function which does not. – Blake Simpson Dec 27 '17 at 10:35
Surprisingly worked! Thanks @Blake – Oluwatobiloba Dec 27 '17 at 10:36
@Oluwatobiloba You can check out some examples here to learn more: http://es6-features.org/#Lexicalthis – Blake Simpson Dec 27 '17 at 10:38

cdoshi · Answer 2 · 2017-12-27T10:37:30.233

0

The context of this changes inside the map's callback function. You can assign this to a variable and use that inside the map's callback function.

componentDidMount(){
    var that = this;
    CATEGORIES.map(function(category){
        that.fetchApiData(category.key);
    });
}

edited Dec 27 '17 at 10:37

answered Dec 27 '17 at 10:30

cdoshi

2,772
1
13
20

How to solve "this is undefined" after mapping

2 Answers2