Question

我正在尝试使用matchDispatchtoProps连接组件。

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


export default connect(matchDispatchToProps)(LogInComponent);

然后我从ajax请求中调用setAuthToken，就像这样

handleLoginButtonClick() {
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://trigger-backend.appspot.com/auth/login/",
            "method": "POST",
            "credentials": 'include',
            "headers": {
                "content-type": "application/x-www-form-urlencoded",
            },
            "data": {
                "password": "apurv",
                "username": "Apurv"
            },
            success: function( data, textStatus, jQxhr ){
                alert("success");
            },
        }

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

这是我调用handleButtonClick

的渲染组件

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

但我收到的错误是“发送不是功能”。我做错了什么？

Answer 1

当你需要成为第二个参数时，你作为第一个连接参数传递mapDispatch。您需要改为使用connect(null, mapDispatch)(LogInComponent)。

另请注意，connect()支持mapDispatch的简写语法。您可以使用您想要绑定的动作创建者传入一个对象，而不是传递实际函数，例如：

const {setAuthToken} = actions;
export default connect(null, {setAuthToken})(LogInComponent);

将操作连接到组件时出错

1 个答案: