Навигация из обратного вызова Promise

Question

Я только начинаю с React Native и сталкиваюсь со следующей проблемой при попытке навигации из обратного вызова Promise.

Вот следующий код, который я пытаюсь запустить. Я хочу перейти на другой экран, если запрос http возвращает правильные данные для входа пользователя.

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>
)};

Это ошибка, которую я получаю от этой функции:

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

Мне кажется, что эта ошибка исходит из-за того, что я не совсем понимаю использование реквизита, поэтому я надеюсь, что этот ответ поможет укрепить мои знания о том, что происходит в React Native.

Заранее спасибо

Answer 1

Эта часть теряет this обязательность:

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

поэтому, когда вы звоните this.props.navigation.navigate(, this означает undefined, о чем говорит ваша ошибка.

Самое простое решение - преобразовать обычную функцию в функцию стрелки, которая лексически связывает this со значением this окружающего контекста.

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

Подробнее здесь

Answer 2

Полагаю, вы не создали объект Navigation с помощью библиотеки реагирования-навигации.Мне нужно увидеть весь файл этого кода, чтобы понять причину.