从Promise回调中导航

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

Answer 1

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

Answer 2

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.