Асинхронная функция не распознается в обратном вызове Firebase

Question

У меня есть фрагмент кода, который пытается войти в систему пользователя в firebase, и как только аутентификация будет выполнена, я хочу зарегистрировать пользователя для push-уведомлений с помощью Expo.

Мой код выглядит так:

import React, { Component } from 'react';
import { StyleSheet, Text, View, AsyncStorage } from "react-native";
import { Container, Content, Form, Input, Item, Button, Label } from 'native-base'

import * as firebase from 'firebase';

import { Permissions, Notifications } from 'expo';

export default class Login extends React.Component {
  constructor(props){
    super(props)

    this.state = ({
      email: '',
      password: ''
    })
  }

  registerForPushNotificationsAsync = async (user) => {
    // Here I have few Expo related 'await' operations returning notification token from expo
  }

  // ...........

  loginUser = (email, password) => {
    try{
      firebase.auth().signInWithEmailAndPassword(email, password).then(function(user){
        this.registerForPushNotificationsAsync(user);
      })
    }
    catch(error){
      console.log(error.toString())
    }
  }

  render() {
    return (
      <Container style={styles.container}>
        <Form>
          // .......
          <Button style={{marginTop: 10}}
            full
            rounded
            success
            onPress={()=>this.loginUser(this.state.email, this.state.password)}
          >
            <Text style={styles.inputButtonsText}>Login</Text>
          </Button>
          // ......
        </Form>
      </Container>
    );
  }
}

совершенно ясно, что происходит и что ожидается, но по какой-то причине, когда я достигаю этой точки в коде:

this.registerForPushNotificationsAsync(user);

Я получаю сообщение об ошибке: this.registerForPushNotificationsAsync не является функцией. (В this.registerForPushNotificationsAsync (пользователь) this.registerForPushNotificationsAsync не определено)

Итак, теперь я не могу понять, почему функция не определена.

Answer 1

Это потому, что вы используете анонимную функцию старого стиля, где this ведет себя немного по-другому. Если вы переключите обратный вызов внутри .then() для ES6 лямбда, он должен работать нормально, так как this будет ссылаться на родительский контекст.