Reactjs Redux和React:未处理的拒绝(TypeError):无法读取属性';推动';未定义的
在Redux操作文件代码中,我试图在用户成功登录时实现history.push('/userfeed')。但是,我一直收到以下错误:未处理的拒绝(TypeError):无法读取未定义的属性“push”。在分派之前,我在我的操作文件中记录了历史记录,它显示为“未定义”。任何帮助都将不胜感激 //重排操作文件Reactjs Redux和React:未处理的拒绝(TypeError):无法读取属性';推动';未定义的,reactjs,redux,react-redux,react-router,axios,Reactjs,Redux,React Redux,React Router,Axios,在Redux操作文件代码中,我试图在用户成功登录时实现history.push('/userfeed')。但是,我一直收到以下错误:未处理的拒绝(TypeError):无法读取未定义的属性“push”。在分派之前,我在我的操作文件中记录了历史记录,它显示为“未定义”。任何帮助都将不胜感激 //重排操作文件 export const login = ({email, password, history}) => dispatch =>{ //Headers const conf
export const login = ({email, password, history}) => dispatch =>{
//Headers
const config = {
headers:{
"Content-Type": "application/json"
}
};
//Request data body to send
const body = JSON.stringify({email, password});
axios.post('/api/user/login/', body, config)
.then(res => {
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
})
history.push('/userfeed')
})
};
//React登录组件文件
class LoginPage extends Component{
state = {
email: '',
password: '',
msg: null
};
handleChange = (event) =>{
this.setState({
[event.target.name]:event.target.value
});
}
static propTypes = {
isAuthenticated: PropTypes.bool,
error: PropTypes.object.isRequired,
login: PropTypes.func.isRequired,
clearErrors: PropTypes.func.isRequired
};
componentDidUpdate(prevProps){
const { error } = this.props;
if(error !== prevProps.error){
//Check for login error
if(error.id === 'LOGIN_FAIL'){
this.setState({
msg: error.message
})
}else{
//If not login fail error then set msg to null
this.setState({
msg: null
})
}
}
}
handleSubmit = (e) =>{
e.preventDefault();
const { email, password } = this.state;
const user = {
email,
password
}
//Attempt to login
this.props.login(user, this.props.history);
this.props.clearErrors();
}
render(){
return(
<div className="LoginPage">
<div className="loginOuterContainer">
<form name="form" onSubmit={this.handleSubmit}>
<div className="emailLabelInput">
<input type="text" className="login-form-control" name="email" placeholder="Email address" onChange={this.handleChange}/>
</div>
<div className="passwordLabelInput">
<input type="password" className="login-form-control" name="password" placeholder="Password" onChange={this.handleChange}/>
</div>
<div className="form-group">
<button className="login-btn">Log in</button>
</div>
</form>
</div>
</div>
)
}
};
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated,
error: state.error
});
export default connect(mapStateToProps, {login, clearErrors})(LoginPage);
类登录页扩展组件{
状态={
电子邮件:“”,
密码:“”,
msg:null
};
handleChange=(事件)=>{
这是我的国家({
[event.target.name]:event.target.value
});
}
静态类型={
已验证:PropTypes.bool,
错误:PropTypes.object.isRequired,
登录名:PropTypes.func.isRequired,
clearErrors:PropTypes.func.isRequired
};
componentDidUpdate(prevProps){
const{error}=this.props;
if(错误!==prevProps.error){
//检查登录错误
如果(error.id==='LOGIN\u FAIL'){
这是我的国家({
msg:error.message
})
}否则{
//如果没有登录失败错误,则将msg设置为null
这是我的国家({
msg:null
})
}
}
}
handleSubmit=(e)=>{
e、 预防默认值();
const{email,password}=this.state;
常量用户={
电子邮件,
密码
}
//尝试登录
this.props.login(用户,this.props.history);
this.props.clearErrors();
}
render(){
返回(
登录
)
}
};
常量mapStateToProps=状态=>({
isAuthenticated:state.auth.isAuthenticated,
错误:state.error
});
导出默认连接(MapStateTops,{login,clearErrors})(LoginPage);
//App.js文件
class App extends Component{
componentDidMount(){
store.dispatch(loadUser());
}
render(){
return(
<Provider store={store}>
<div className="App">
<Router>
<Switch>
<Route exact path="/login" component={LoginPage}/>
<Route exact path="/userfeed" component={UserFeed}/>
</Switch>
</Router>
</div>
</Provider>
);
}
};
export default App;
类应用程序扩展组件{
componentDidMount(){
store.dispatch(loadUser());
}
render(){
返回(
);
}
};
导出默认应用程序;
您的登录
函数期望对象上有历史
属性,但您这样调用它:
this.props.login(用户,this.props.history);
应该是
this.props.login({user,password,history:this.props.history});
是的,就是这样!另外,我需要添加的不是用户,而是电子邮件和密码。我认为你的回答是正确的。非常感谢你!