Javascript 无法从AJAX调用调用操作

我有一个绑定到动作的react组件。我正在从这个组件调用一个api，我希望在api成功后，我应该将响应传递给操作。目前我是这样做的

成功时，我将响应传递给我的操作，即setAuthToken

class LogInComponent extends Component {

    static contextTypes = {
        router: PropTypes.object.isRequired
    }
 handleLoginButtonClick() {
        let token;
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://example-backend.appspot.com/auth/login/",
            "method": "POST",
            "credentials": 'include',
            "headers": {
                "content-type": "application/x-www-form-urlencoded",
            },
            "data": {
                "password": document.getElementById("password").value,
                "username": document.getElementById("username").value
            },
            success: function( response, textStatus, jQxhr ){
                this.props.setAuthToken(response.auth_token)
            },
        }

        $.ajax(settings).done((response) => {
            token = response.auth_token
            console.log('check');
            this.context.router.push('/app')
        });

}

render(){
        return (
            <div className="LoginPage">
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                            <input id="username" type="username" placeholder="username"/>
                            <input id="password" type="password" placeholder="password"/>
                            <p className="message">Not registered? <a href="#">Request Username and Password</a></p>
                        </form>
                        <button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
                    </div>
                </div>
            </div>
        );
    }
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({setAuthToken: actions.setAuthToken}, dispatch);
}


export default connect(null, matchDispatchToProps)(LogInComponent}

我犯了这样的错误

尝试以下解决方案后出错

---

jQuery回调“成功”

此

未指向您的react组件

handleLoginButtonClick() {
    let token;
    var that = this; //Save a reference to 'this' using scope defined 'that'

   var settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://example-backend.appspot.com/auth/login/",
        "method": "POST",
        "credentials": 'include',
        "headers": {
            "content-type": "application/x-www-form-urlencoded",
        },
        "data": {
            "password": document.getElementById("password").value,
            "username": document.getElementById("username").value
        },
        success: function( response, textStatus, jQxhr ){
            // Using 'that' since 'this' belongs to jQuery
            that.props.setAuthToken(response.auth_token)
        },

    /* ... */

    }
}

---

成功回调中的

此

不是您想要的

此

-尝试将成功回调绑定到

此

上，然后我该怎么办？您可以发布一个答案来说明这一点吗？我对这件事很陌生。谢谢你做了一件类似于你做的

$.ajax（设置）。完成了
工作。。。使用箭头函数，或者，如我所说，将成功回调绑定到
this
-你知道如何绑定，你在你的代码中这样做-你知道这些东西是如何工作的，你不需要回答给我的错误说Uncaught TypeError:无法将undefined或null转换为objectCheck我的更新。我在末尾添加了一个错误图像。您是否检查了
响应的有效性。auth_token
？是的，这似乎来自您的
DataReducer
，试图了解哪一行正在中断它。你能突出显示它或把它放在断点下，并添加一个屏幕截图或任何指示吗？
handleLoginButtonClick() {
    let token;
    var that = this; //Save a reference to 'this' using scope defined 'that'

   var settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://example-backend.appspot.com/auth/login/",
        "method": "POST",
        "credentials": 'include',
        "headers": {
            "content-type": "application/x-www-form-urlencoded",
        },
        "data": {
            "password": document.getElementById("password").value,
            "username": document.getElementById("username").value
        },
        success: function( response, textStatus, jQxhr ){
            // Using 'that' since 'this' belongs to jQuery
            that.props.setAuthToken(response.auth_token)
        },

    /* ... */

    }
}