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

【问题标题】：React-redux: cannot fetch the store as props using connect, Cannot read property 'props' of undefined errorReact-redux：无法使用连接将商店作为道具获取，无法读取未定义错误的属性“道具”
【发布时间】：2019-03-18 07:39:09
【问题描述】：

我正在尝试做出反应并使用它为单页应用程序构建登录表单。我正在使用 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：无法读取未定义的属性“道具”

指向代码中的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)

这很简单。我肯定在这里遗漏了一些东西，我不知道它是什么..请帮我解决这个问题。

谢谢

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

这是this popular problem 的一个特例。它与 Redux 无关。 login 方法用作回调，并丢失 this 上下文。

应该是：

login = this.login.bind(this);

login() {...}

或者：

login = () => {...}

several reasons 更适合前者。

【讨论】：