How to call function in a function on react-native?

Question

Hi this is my first time developing apps in javascript and react-native, its kind of a noob question. How do I call _getData function in __onRegionChangeComplete function? I tried this._getData() it shows

error: undefined is not a function(evaluation'this._getData()')').

var React = require('react-native');

var {
  StyleSheet,
  Text,
  View,
  Image,
  MapView,
  Component,
} = React;

class Map extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView style={styles.map} 
          showsUserLocation={true}
          onRegionChangeComplete={this._onRegionChangeComplete}
        />
      </View>
    );
  }

  _onRegionChangeComplete(region)
  {

  }

  _getData()
  {

  }
}

var styles = StyleSheet.create({
  container:{
    flex: 1
  },
  map: {
    flex: 1,
  },
  image: {
    width: 64,
    height: 64
  }
});

module.exports = Map;

Answer 1

Let me show you an example, and hope it helps you.

1.Of course, you can use ES5 feature(createClass) instead of ES6(extends class) method to solve this binding problem.

2.You can keep using ES6, just be careful with binding this. For example in my component

_func1(){
    ...
}

_func2(){
  this._func1()
}

if I want to call _func1() in func2, 'this' is binded to _func2 itself, of course, there is no func1() there.

But if I bind _func2() to component context when I call _func2(), problem will be solved.

<subComponent subProp = {this._func2.bind(this)} />

Hope it helps you.

Answer 2

Solve it by changing the extends Component to createclass and adding commas after each function. read a brief introduction about them is that createclass have autobinding for function and extends component does not do that for you, so you have to bind them yourself.

var React = require('react-native');

var {
  StyleSheet,
  Text,
  View,
  Image,
  MapView,
  Component,
} = React;

var Map = React.createClass({
  render(){
    return (
      <View style={styles.container}>
        <MapView style={styles.map} 
          showsUserLocation={true}
          rotateEnabled={false}
          onRegionChangeComplete={this.onRegionChangeComplete}
        />
      </View>
    );
  },

  onRegionChangeComplete(region) {
    this.getData(region)
  },

  getData(region) {

  },
});

var styles = StyleSheet.create({
  container:{
    flex: 1
  },
  map: {
    flex: 1,
  },
  image: {
    width: 64,
    height: 64
  }
});

module.exports = Map;

Answer 3

This example sure helpful

export default class Setup extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
      <View>
        <Text h1>Login</Text>
        </View>
        <View>
        <Button
          onPress={this._onPressButton}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
        </View>
      </View>
    );
  }
}

Answer 4

One grammar note you should address that might be causing errors: add a comma after the close brace for every method in the class. Try that and edit your post to see if any errors. (Sorry I'd put this in a comment but don't have enough reputation!)

Answer 5

You have to use the ES6 way of doing a function or it will not work, specially for higher version such as 0.59. The code below should work, when calling functions within class. You have got it right for calling the function by using this._onRegionChangeComplete,

  constructor(props) { 
  super(props); 
  this.state = {sliderValue: 15,}
  }

  var Map = React.createClass({
     render(){
     return (
     <View style={styles.container}>
        <MapView style={styles.map} 
         showsUserLocation={true}
         rotateEnabled={false}
         onRegionChangeComplete={this._onRegionChangeComplete}
    />
  </View>
    );
 },
  _onRegionChangeComplete=()=>
    {
        //Your code here. you can use this.variable if you want to use variables from 
        //your constructor(props) { super(props); this.state = {sliderValue: 15,} }

       //Example passing variable
       let Myvalue = this.state.sliderValue;

     }