Im getting this type error when im trying to navigate to next view after getting json response.but my this.props.navigator.push({id:'HomeCaseList')} works well if i user out side of my json response getting method.can any one help me here.

click event

<MKButton
            style={{marginLeft:10, marginRight:10,marginTop:10,marginBottom:350,height:40, width:400}}
            backgroundColor={'#fff'}
            //shadowRadius={2}
            //shadowOffset={{width:0, height:2}}
            shadowOpacity={.7}
            shadowColor="black"
              onPress={
              //  navigator.push();

                this.loginToApp.bind(this)
              }>

login function

gotoNext() {
      fetch('http://url/login/', {
        credentials: 'same-origin',
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: 'wasalaa',
          password: 'a',
        })
      }).then(function(response) {
      //console.log(response.headers.get('Content-Type'))
      //console.log(response.headers.get('Date'))
      //console.log(response.status)
      //console.log(response.statusText)
      //console.log('json',response
      //console.log(response.headers.get('JSESSIONID'))
      return response.json()
      }).then(function(json){
      console.log('login response',json)
      if(json.message_code === "SUCCESS"){
        console.log('user logged')
        this.props.navigator.push({
          id: 'HomeCaseList',
          //sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
        });
      }

      }).catch(function(err){
      console.log('error', err)
      })
  }

Im getting this type error when im trying to navigate to next view after getting json response.but my this.props.navigator.push({id:'HomeCaseList')} works well if i user out side of my json response getting method.can any one help me here.

click event

<MKButton
            style={{marginLeft:10, marginRight:10,marginTop:10,marginBottom:350,height:40, width:400}}
            backgroundColor={'#fff'}
            //shadowRadius={2}
            //shadowOffset={{width:0, height:2}}
            shadowOpacity={.7}
            shadowColor="black"
              onPress={
              //  navigator.push();

                this.loginToApp.bind(this)
              }>

login function

gotoNext() {
      fetch('http://url/login/', {
        credentials: 'same-origin',
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: 'wasalaa',
          password: 'a',
        })
      }).then(function(response) {
      //console.log(response.headers.get('Content-Type'))
      //console.log(response.headers.get('Date'))
      //console.log(response.status)
      //console.log(response.statusText)
      //console.log('json',response
      //console.log(response.headers.get('JSESSIONID'))
      return response.json()
      }).then(function(json){
      console.log('login response',json)
      if(json.message_code === "SUCCESS"){
        console.log('user logged')
        this.props.navigator.push({
          id: 'HomeCaseList',
          //sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
        });
      }

      }).catch(function(err){
      console.log('error', err)
      })
  }

• javascript
• json
• reactjs
• react-native

1 Answer 1

In callback this refers to global scope(in browser it is window in node.js it is global, and if you use strict mode this will be undefined) and not for your ponent, you should set this

//....
.then(function(json) {
  if (json.message_code === "SUCCESS") {
    this.props.navigator.push({
      id: 'HomeCaseList',
      // sceneConfig: Navigator.SceneConfigs.FloatFromBottom
    });
  }
}.bind(this))
 ^^^^^
// ....