Is not a function after view switch

Question

I have problem with react-native when switching views with react-native-router-flux.

    mapMarkerGen(){
     if(mapMarkersFetched){
     _this = this;
     return mapMarkers.map(function(marker, i){
    return(
    <MapView.Marker
      key={i}
      coordinate={{
        longitude: parseFloat(marker.lo),
        latitude: parseFloat(marker.la),
      }}
      onPress={() =>{_this.getMarkerInfo(marker.id, i);}}
      title={_this.state.title}
      description={_this.state.info}
      onCalloutPress={function(){Actions.place({placeID: marker.id});}}
    >
    </MapView.Marker>
  );
  });
}
}

After i do switch between views if i click callout and come back i get error _this.getMarkerInfo is not a function

"react": "^16.0.0-alpha.12",

"react-native": "^0.45.1",

"react-native-router-flux": "^3.40.1"

How do you call the `mapMarkerGen`? Is `this` bound correctly? — Marko Gresak, Jun 17 '17 at 21:25
mapMarkerGen is called from a diffrent function like this: {this.mapMarkerGen()} — Carel155, Jun 17 '17 at 21:25
Is the call within a function where `this` scope is different of that you expect in the posted code? The best course of action is to bind the function inside the constructor and always call the bound one instead. You can do something like `this.mapMarkerGen = this.mapMarkerGen.bind(this)` and every call of `mapMarkerGen` will now have correct `this` reference, regardless of where it's called. — Marko Gresak, Jun 17 '17 at 21:28
I addded this.mapMarkerGen = this.mapMarkerGen.bind(this) to constructor and didn't change any code but it didn't change anything currently. From the function where i call mapMarkerGen i have set _this = this; and then call {this.mapMarkerGen()} — Carel155, Jun 17 '17 at 21:40
Using `_this = this` won't help if the original `this` reference is incorrect. Since the code is missing, I can't tell what could be wrong. I suggest you check if there are any typos within `getMarkerInfo` definition or call. And see if it's accessible where you define `_this = this` and work from there. BTW, why are you defining `_this` as global instead of local to `mapMarkerGen`? It might be that you overwrite the value of `_this` somewhere and break stuff. — Marko Gresak, Jun 17 '17 at 21:46
I would also suggest you write functions using arrow operator instead of `function` and let the VM (or alternatively a compiler like babel) handle binding correct `this` reference. — Marko Gresak, Jun 17 '17 at 21:47
The problem was that i was defining _this as a global instead of local. Thanks for helping! — Carel155, Jun 17 '17 at 21:51
Np :) For the future, I would suggest you set up a linter such as [Eslint](http://eslint.org/), which should aid in catching errors like these. I'll also post this solution as an answer so other readers don't need to read through these comments. — Marko Gresak, Jun 17 '17 at 22:12

score 0 · Accepted Answer · answered Jun 17 '17 at 22:16

The problem is that you are defining _this = this as a global variable. There is a chance you overwrite the value and when you want to access it inside onPress callback, the value is pointing to a different this reference, which does not define the called function.

To fix this, replace the aforementioned code with: const _this = this;

I would suggest using ES2015's arrow function like you do with the onPress callback, where you don't need to handle this reference yourself.

Is not a function after view switch

1 Answers1