React native and mobx: [getFunction] is not a function

Issue

I am currently trying to implement a MobX function that imports markers from a firebase database like so:

fbMarkers.getMarkers().forEach( (marker, index) => {
  console.log("Adding marker to map..");
  console.log(JSON.stringify(marker));
...

However, I get the error _MarkersStore.fbMarkers.getMarkers is not a function. The function looks like this:

@computed get getMarkers() {
    console.log("Getting markers.. which are:");
    console.log(JSON.stringify(this.markers));
    return this.markers;
  }

Whenever I remove the @computed get part form the signature (such that the signature is getMarkers() {...}, I can successfully call the function, but my markers are not display (I am using Airbnb mapView).

My rendering method looks as follows:

render() {
    var renderingMarkers = fbMarkers.markers.slice() || [];
    return (<View>
      {renderingMarkers.forEach( (marker, index) => {
      return (
      <MapView.Marker
      navigator={this.props.navigator}
      key={index}
      coordinate={{latitude: marker.coordinate.latitude, longitude: marker.coordinate.longitude}}
      title={marker.title}
      description={marker.description}
      onPress={(coord, pos) => this.navigateToBookBike(marker.title)}
      ><View style={styles.bikeRadius}><View style={styles.bikeMarker}>
      <Text>Heyy</Text>
      </View></View>
      </MapView.Marker>
);
      })}
      </View>)
  }

Is there any obvious mistake I make, or is there anything I must regard? Any help and ideas are welcome! :)

The full code is here, in case this is helpful

Solution

You are using a JavaScript getter, which means you should not dereference the value like a function call. Do this instead:

fbMarkers.getMarkers.forEach((marker, index) => {
  console.log("Adding marker to map..");
  console.log(JSON.stringify(marker));
});

Answered By - Tholle