Javascript 无法在axios回调中访问正确的此上下文

我可以使用email函数访问

登录中正确的
此
上下文，但是axios回调函数中的
此
上下文未定义。我可以在组件的渲染中调用用户操作
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);

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

import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、按钮、文本输入}；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“./actions/UserActions”导入{signInUser}
从“./API/config”导入API；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
控制台日志（道具）
this.state={用户名：''，密码：'}；
this.signInWithEmail=this.signInWithEmail.bind（this）；
}
通过电子邮件登录（用户名、密码）{
console.log（this.props）；//在此处更正上下文
API.post（“/token/”{
用户名：用户名，
密码：pass
}).然后（功能（响应）{
console.log（response.data）；
console.log（this.props）；//此处未定义
}).catch（函数（错误）{
//显示错误或重定向
console.log（错误）；
});
}
render（）{
返回(
访问：{this.props.userState.accessToken}
refres:{this.props.userState.isSignout.toString（）}
用户名：{this.state.username}
密码：{this.state.password}
用户名
this.setState（{username}）}
值={this.state.username}
/>
密码
this.setState（{password}）}
值={this.state.password}
/>
this.signiWithEmail（this.state.username，this.state.password）}/>
{/*this.props.signInUser（“虚拟令牌”，“虚拟刷新”）}/>*/}
);
}
};
const styles=StyleSheet.create({
标签：{
尺寸：16，
fontWeight:'正常'，
marginBottom:48，
边框颜色：“FFF222”
},
分隔器：{
borderBottomColor:“#000000”，
边界宽度：1，
玛吉：10，
},
输入：{
背景颜色：“#F0EEEE”，
身高：40，
边界半径：5，
marginBottom:10，
尺寸：18
},
输入标签：{
尺码：18，
fontWeight：“粗体”
}
});
常量mapStateToProps=（状态）=>{
const{userState}=state
返回{userState}
}
const mapDispatchToProps=调度=>(
bindActionCreators({
阁下，
}，调度）
);
导出默认连接（mapStateToProps、mapDispatchToProps）（LoginForm）；
您可以在
中使用箭头函数（
=>
），然后使用
回调。在arrow函数中，
上下文（此）不会自动更改。试试这个：


API.post（“/token/”{
用户名：用户名，
密码：pass
})。然后（响应=>{
console.log（response.data）；
console.log（this.props）；
}).catch（错误=>{
console.log（错误）；
});您可以在
内使用箭头函数（
=>
），然后使用
回调。在arrow函数中，
上下文（此）不会自动更改。试试这个：


API.post（“/token/”{
用户名：用户名，
密码：pass
})。然后（响应=>{
console.log（response.data）；
console.log（this.props）；
}).catch（错误=>{
console.log（错误）；
});使用箭头函数保留react组件的上下文

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

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

使用箭头函数保留react组件的上下文

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

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

最简单的修复方法是将要获取
未定义
的函数变成一个箭头函数，该函数自动绑定到定义它的上下文。最简单的修复方法是将要获取
未定义
的函数变成一个箭头函数，该函数自动绑定到定义它的上下文。