Question

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

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

    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

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

它应该是：

login = this.login.bind(this);

login() {...}

或者：

login = () => {...}

several reasons更适合使用前者。

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

1 个答案: