React-redux：无法使用connect获取作为道具的商店，无法读取未定义错误的属性“ props”

Question

我正在尝试做出反应，并使用该表单为一个一页应用程序构建登录表单。 我正在使用redux来存储整个应用程序中的用户信息，但仍然无法通过相同的样板设置进行操作。

我快完成了，但是我无法使用dispatch方法来调度动作，这是我的登录组件的代码：

    import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux';

// import user actions

import { logMeIn } from "../actions/userActions"

const boxStyle = {
    width: "400px",
    margin: "40px auto",
}



export default connect((store)=>{
    return {
        user: store.user
    };
})(class loginBox extends Component {

    login() {
        let email = document.getElementById("email");
        let password = document.getElementById("password");
        email = email.value;
        password = password.value;

        return this.props.dispatch(logMeIn(email, password))
    }

    render(){
        return (
            <div className="box" style={boxStyle}>
              <form className="form">
                <div className="field">
                    <label className="label">Your Email</label>
                    <input className="input" type="email" id="email" />
                </div>
                <div className="field">
                    <label className="label">Your Password</label>
                    <input className="input" type="password" id="password" />
                </div>
                <div className="level">
                    <button className="button is-dark" type="button" onClick={ this.login }>Login</button>
                    <NavLink to="/">Reset password</NavLink>
                </div>
              </form>
            </div>
          )
        }
})

此处，代码已编译，没有任何错误，并且显示了登录页面，但是在提交表单时，发生以下错误：

×TypeError：无法读取未定义的属性“ props”

指向在代码中return this.props.dispatch(logMeIn(email, password))行。

作为Redux的新手，我无法完全理解它，不过请看一下我的商店：

    import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

const middleware = applyMiddleware(logger, thunk)

export default createStore(reducer, middleware)

很简单。 我肯定在这里缺少什么，我不知道它是什么..请帮助我解决此问题。

谢谢

Answer 1

这是这个流行问题的特例。 它与Redux无关。 login方法用作回调，并且会丢失this上下文。

应该是：

login = this.login.bind(this);

login() {...}

要么：

login = () => {...}

前者是可取的， 原因有几个 。