Невозможно получить доступ к правильному этому контексту внутри собственной реакции обратного вызова ax ios

Question

Я могу получить доступ к правильному контексту this внутри функции signInWithEmail, однако контекст this внутри функции обратного вызова от ax ios равен undefined. Я могу вызвать пользовательское действие SignInUser внутри рендера компонента с помощью: this.props.signInUser. Но я хочу назвать его на основе ответа API.

Вот код из моего компонента

import React, { Component } from 'react';
import { View, Text, StyleSheet, Button, TextInput } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { signInUser } from "../actions/UserActions"
import API from "../api/config";

class LoginForm extends Component {
    constructor(props) {
        super(props);
        console.log(props)
        this.state = { username: '', password: '' };
        this.signInWithEmail = this.signInWithEmail.bind(this);
    }

    signInWithEmail(username, pass) {
        console.log(this.props); // correct context here
        API.post('/token/', {
            username: username,
            password: pass
        }).then(function (response) {
            console.log(response.data);
            console.log(this.props); // undefined here
        }).catch(function (error) {
            // Show error or redirect
            console.log(error);
        });
}

    render() {
        return (
            <View>
                <Text>access: {this.props.userState.accessToken}</Text>
                <Text>refres: {this.props.userState.isSignout.toString()}</Text>
                <Text>username: {this.state.username}</Text>
                <Text>password: {this.state.password}</Text>
                <Text style={styles.inputLabel}> Username </Text>
                <TextInput
                    style={styles.input}
                    autoCapitalize="none"
                    onChangeText={(username) => this.setState({ username })}
                    value={this.state.username}
                />
                <Text style={styles.inputLabel}> Password </Text>
                <TextInput
                    style={styles.input}
                    secureTextEntry
                    onChangeText={(password) => this.setState({ password })}
                    value={this.state.password}
                />
                <Button title="Sign in with email" onPress={() => this.signInWithEmail(this.state.username, this.state.password)} />
                {/* <Button title="Sign in with email" onPress={() => this.props.signInUser("dummy-token", "dummy-refresh")} /> */}
            </View>
        );
    }
};

const styles = StyleSheet.create({
    label: {
        fontSize: 16,
        fontWeight: 'normal',
        marginBottom: 48,
        borderColor: "#FFF222"
    },
    divider: {
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
        marginVertical: 10,
    },
    input: {
        backgroundColor: '#F0EEEE',
        height: 40,
        borderRadius: 5,
        marginBottom: 10,
        fontSize: 18
    },
    inputLabel: {
        fontSize: 18,
        fontWeight: "bold"
    }
});

const mapStateToProps = (state) => {
    const { userState } = state
    return { userState }
}

const mapDispatchToProps = dispatch => (
    bindActionCreators({
        signInUser,
    }, dispatch)
);

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

Answer 1

Используйте функцию стрелки для сохранения контекста реагирующего компонента

}).then((response) => {
    console.log(response.data);
    console.log(this.props); // undefined here
})....

Answer 2

Вы можете использовать функцию стрелки (=>) внутри обратного вызова then. Внутри функции стрелки Context (это) не будет изменено автоматически. Попробуйте это:

API.post('/token/', {
        username: username,
        password: pass
    }).then(response => {
        console.log(response.data);
        console.log(this.props);
    }).catch(error => {
        console.log(error);
    });

NB Внутри функции Simple (вы используете в качестве обратного вызова .then ()) Context (this) будет global / window!