undefined is not an object (evaluating 'this.props.navigation') with fetch

Question

I try my best to make a Sign-in form with React native but :

I can't make a redirection to 'App', the error message is : (TypeError: undefined is not an object (evaluating 'this.props.navigation')])

try {
  fetch('http://93.xxx.xx.xx:5151/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      },
      body: formBody,
    })
    .then(function(response) {
      if (response.ok) {
        this.props.navigation.navigate('App');
      } else {
        throw new Error("Failed to fetch [error : " + response.status + "]");
        Alert.alert("Error [" + response.status + "] - " + response.statusText);
      }
    })
    .then(function(response) {
      if (response.ok) {
        Alert.alert(response.userToken);
        console.log(response);
      } else {
        Alert.alert("Error [" + response.status + "] - " + response.statusText);
      }
    })
} catch (error) {
  if (error) {
    console.error(error);
  }
}

Is anyone know how to do that ?

I only have one solution so far :

fetch('http://93.xxx.xx.xx:5151/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    body: formBody
  })
  .then(res => {
    if (res.ok) {
      this.props.navigation.navigate('App')
    } else {
      if (res.status == 400) {
        Alert.alert("Error 400 : login rejected because -> " + res.message)
      } else {
        throw Error(`Request rejected with status ${res.status}`);
      }
    }
  })
  .catch(console.error)
}

But with this solution i don't know how to save the User token ...

score 0 · Accepted Answer · answered May 14 '20 at 09:19

0

Its a scoping issue , change this :

.then(function(response) { // due to this you are losing `this` scope inside it

// due to that, this is not accessible, in result you will get error
this.props.navigation.navigate('App');

To :

.then((response) => { // <--- Fat arrow is what you need

answered May 14 '20 at 09:19

Vivek Doshi

56,649
12
110
122

thanks to you my redirection work well now, but inside the seconde .then my "if (response.ok)" didn't work anymore ... i have this error : undefined is not an object (evaluating 'response.ok') – Xodarap May 14 '20 at 09:27
@Xodarap, that is because you are not returning anything from first .then , `return response` in first `.then` then you will get the value inside second one – Vivek Doshi May 14 '20 at 09:34

score 0 · Answer 2 · answered May 14 '20 at 10:07

The first one is a scope issue. If you want to use "this" in an anonymous function, you need to bind it to your object. There are two ways to do that:

1) If you use the old function style, the former object don't get automatically bound to it. Therefore you need to bind the parent object manually. If you want a little more explanation about it, look here: What is the use of the JavaScript 'bind' method?

Promise.then(function(res) {
    return "Your return"
}.bind(this));

2) The second way is to use the ES6 "Fat arrow"-Function. This works internally a bit different and binds the content of the parent Obejct directly.

Promise.then(res => "Your return");

On your second Problem I don't fully understand what your goal is. Do you want the user token in your next route? If so, you should use "setParams":

fetch('http://93.xxx.xx.xx:5151/login', { 
 method: 'POST', 
 headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, 
 body: formBody 
})
.then(res => {
 if(res.ok) {
  this.props.setParams({
    token: res.userToken
  })
  this.props.navigation.navigate('App')
 } else {
  if (res.status == 400) {
    Alert.alert("Error 400 : login rejected because -> " + res.message)
  } else {
    throw Error(`Request rejected with status ${res.status}`);
  }
}})
.catch(console.error)
}}

undefined is not an object (evaluating 'this.props.navigation') with fetch

2 Answers2