Привет, у меня есть компонент входа в систему, где я вызываю создателя действия, чтобы отправить действие входа в систему и получить сведения о пользователе из серверного API. Вызов выполнен успешно, но мой компонент Login не выполняет рендеринг и перенаправление на Home. Это мой компонент для входа.
import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { login } from "../../store/actions/authActions";
import PageHead from "../layout/PageHead";
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
loading: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
console.log(this.props);
}
handleChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
handleSubmit() {
event.preventDefault();
this.props.login({
email: this.state.email,
password: this.state.password
});
this.setState({ loading: true, email: "", password: "" });
}
render() {
if (!this.props.auth.is_logged) {
return <Redirect to="/" />;
}
return (
<div>
<PageHead
links={[{ name: "Login", url: "/login" }]}
title="Login"
/>
<section className="content">
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
{/* <!-- general form elements --> */}
<div className="card card-success">
<div className="card-header">
<h3 className="card-title">
Quick Example
</h3>
</div>
{/* <!-- /.card-header -->
<!-- form start --> */}
<form onSubmit={this.handleSubmit}>
<div className="card-body">
<div className="form-group">
<label htmlFor="exampleInputEmail1">
Username
</label>
<input
type="text"
name="email"
className="form-control"
id="exampleInputEmail1"
placeholder="Enter username"
value={this.state.username}
onChange={this.handleChange}
/>
</div>
<div className="form-group">
<label htmlFor="exampleInputPassword1">
Password
</label>
<input
type="password"
name="password"
className="form-control"
id="exampleInputPassword1"
placeholder="Password"
value={this.state.password}
onChange={this.handleChange}
/>
</div>
</div>
{/* <!-- /.card-body --> */}
<div className="card-footer">
<button
type="submit"
className="btn btn-primary"
>
{this.state.loading
? "Loading.."
: "Login"}
</button>
</div>
</form>
</div>
{/* <!-- /.card --> */}
</div>
</div>
</div>
</section>
</div>
);
}
}
const mapStateToProps = ({ auth }) => {
return {
auth
};
};
export default connect(mapStateToProps, { login })(Login);
Понятия не имею, как это сделать, поскольку я новичок в стеке реагирования. Любая помощь в этом отношении будет принята с благодарностью. Я с нетерпением жду, чтобы решить эту проблему с помощью мощного сообщества. в логин console.log (this.props) 