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

Share Improve this question Follow asked Apr 9, 2016 at 14:52 hashhash 5,41677 gold badges4141 silver badges5959 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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))
 ^^^^^
// ....