我在从react Login组件调度redux操作时遇到问题.我试着想不通

Question

我试图在用户登录后将loginAction发送到redux存储以使用用户详细信息更新存储，但我遇到了一个错误类型错误：无法读取未定义的的属性"props">

import React, { Component } from 'react'
import Navigation from '../components/Navigation';
import {
Form , Button
} from 'react-bootstrap';
import axios from  'axios';
import { connect } from 'react-redux';
import { getUser } from '../redux/actions';
import store from '../redux/store'
class Login extends Component {  
handleLogin(e){
e.preventDefault();        
const email = document.getElementById('formEmail').value;
const password = document.getElementById('formPassword').value;
const user = { email, password};
this.props.dispatch(getUser(user)) //here's where the problem is!           


}
render() {
const { user } = this.props; 
return (
<div className="bg-light">
<Navigation />
<div className="container">
<div className="user-login-wrap">
<div className="user-icon">
<i className="fa fa-user"></i>
</div>
<div className="bg-white p-5 shadow-sm">
<h4 className="text-center">Login</h4><hr />
<div className="p-3"></div>
<Form>
<Form.Group controlId="formEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
{/* <Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group> */}
<Button variant="primary" type="submit" onClick={this.handleLogin}>
Submit
</Button>
</Form>
</div>
</div>
</div>                
</div>
)
}
}
const mapStateToProps = state => ({user : state.user})
// const mapDispatchToProps = dispatch => ({
//     getUser : actions.getUser
// })
export default connect( mapStateToProps, {getUser})(Login);

这是我的action.js文件

import axios from 'axios';
import { GET_USER, GET_USER_ERROR } from '../types';
export const getUser = (user) => async dispatch => {
// return console.log(user)
try{
const res = await axios.post(`http://localhost:8080/users/login`, user)       
dispatch({
type: GET_USER,
payload: res.data
})
}
catch(e){
dispatch({
type: GET_USER_ERROR,
payload: console.log(e),
})
}
}

这就是我得到的错误

类型错误：无法读取未定义的的属性"props">

我想向商店发送一个活动，以便商店得到更新？

Answer 1

我看到你已经把mapDispatchToProps注释掉了。如果你想使用它，我相信它会是这样的：

const mapDispatchToProps = dispatch => {
return {
getUser: user => dispatch(getUser(user))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login)

然后你可以用this.props.getUser(user)来称呼它

如果你能做到这一点，那么你可以尝试在连接包装器中直接放入{getUser}的简化代码。