Navigate from within Promise callback

Question

I am just starting out with React Native and am running into the following problem when trying to navigate from within a Promise callback.

Here is the following code I am trying to run. I want to navigate to another screen if the http request returns that the user's login information is correct.

login() {
  axios({
      method: 'post',
      url: `${Globals.WebAPI}/api/authentication/login`,
      data: {
        username: this.state.username,
        password: this.state.password
      }
  })
  .then(function(response) { 
      console.log(response.data.token)
      AsyncStorage.setItem("AuthToken", response.data.token);
      this.props.navigation.navigate('PictureDetails', {base64: photo.base64});
  })
  .catch(function(error) {
      console.log(error);
  });
}



render() {
return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button
      title="Go to Details"
      onPress={this.goToDetails}
    />
    <Button
      title="Signup"
      onPress={this.goToSignup}
    />
    <Text>Username</Text>
    <TextInput
    style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({username: text})}
    value={this.state.username}
  />
  <Text>Password</Text>
  <TextInput
    style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({password: text})}
    value={this.state.password}
  />
  <Button
      title="Login"
      onPress={this.login}
    />
  </View>
)};

This is the error that I am getting from this function:

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

I feel like this error is coming from me not fully understanding the props usage, so I am hoping that this answer helps solidify my knowledge of what's going on in React Native.

Thanks in advance

here `.then(function(response) { console.log(response.data.token) AsyncStorage.setItem("AuthToken", response.data.token); this.props.navigation.navigate('PictureDetails', {base64: photo.base64}); })` your `this` pointer to class instance is lost. So you can bind the `this` with arrow function. — Karen Grigoryan, Nov 19 '18 at 22:19
For more information on what @KarenGrigoryan is describing, see here: https://stackoverflow.com/questions/30486345/losing-this-context-in-javascript-when-passing-around-members. To elaborate on the solution: `onPress={this.login.bind(this)}` or `onPress={x=> this.login()}` either of these methods should work. — David784, Nov 19 '18 at 22:37
@SamMallabone instead of `then(function(response) { ...` use arrow function `then((response) => {...` — Karen Grigoryan, Nov 19 '18 at 22:38
Ah, @KarenGrigoryan and I were actually talking about two different issues. She is pointing out that the function `this` will obscure the class level `this`. I believe you will also need to bind the class `this` in your `onPress` event. — David784, Nov 19 '18 at 22:43
@KarenGrigoryan that works perfectly, thanks! If you want to convert that to an answer I can mark it as correct. — anonymous-dev, Nov 19 '18 at 22:43
@David784 I actually already bound the function to this in the constructor. The scoping of the this function was the problem, thanks anyway — anonymous-dev, Nov 19 '18 at 22:45

score 5 · Accepted Answer · answered Nov 19 '18 at 22:49

This part loses this binding:

  .then(function(response) { 
      console.log(response.data.token)
      AsyncStorage.setItem("AuthToken", response.data.token);
      this.props.navigation.navigate('PictureDetails', {base64: photo.base64});
  })

so when you call this.props.navigation.navigate(, this is undefined, which is what your error tells you.

The easiest fix is to convert regular function to an arrow function, which lexically binds the this to surrounding context's this value.

  .then((response) => { 
      console.log(response.data.token)
      AsyncStorage.setItem("AuthToken", response.data.token);
      this.props.navigation.navigate('PictureDetails', {base64: photo.base64});
  })

More info here

score -3 · Answer 2 · answered Nov 19 '18 at 22:34

-3

I guess you didn't create a Navigation object using react-navigation library. I need to see the whole file of this code to make sure what the reason is.

answered Nov 19 '18 at 22:34

James Chan

1

1

Welcome to Stackoverflow. It better you seek clarification in comments rather than as a reply. Then when all is clear, post a reply. – bcperth Nov 19 '18 at 22:41

Navigate from within Promise callback

2 Answers2