В моем проекте, когда я пытаюсь напечатать имя только что зарегистрированного пользователя, оно отображается как неопределенное.
Когда я регистрирую пользователя, он перенаправляется на страницу панели инструментов, где имя должно появиться, но это не так. Но когда я перезагружаю страницу, имя отображается правильно.
Вход в систему похож на регистрацию, но работает нормально.
Мой компонент для регистрации претендента.
import React, { Component } from "react";
import { Link, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { registerBidder } from "../../actions/auth";
import { createMessage } from "../../actions/messages";
export class RegisterBidder extends Component {
state = {
email: "",
password: "",
password2: "",
first_name: "",
last_name: "",
aluno: "false"
};
static propTypes = {
registerBidder: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool
};
onSubmit = e => {
e.preventDefault();
const {
email,
password,
password2,
first_name,
last_name,
aluno
} = this.state;
if (password != password2) {
this.props.createMessage({
passwordNotMatch: "Passwords não são iguais"
});
} else {
const newUser = {
email,
first_name,
last_name,
password,
aluno
};
this.props.registerBidder(newUser);
}
};
handleChange = () => {
if (this.state.aluno == "false") {
this.setState({ aluno: "true" });
} else {
this.setState({ aluno: "false" });
}
};
onChange = e => this.setState({ [e.target.name]: e.target.value });
render() {
if (this.props.isAuthenticated && this.registerBidder) {
return <Redirect to="/dashboardBidder" />;
}
const { email, password, password2, first_name, last_name } = this.state;
return (
<div className="col-md-6 m-auto">
<div className="card card-body mt-5">
<h2 className="text-center">Register</h2>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Email</label>
<input
type="email"
className="form-control"
name="email"
onChange={this.onChange}
value={email}
/>
</div>
<div className="form-group">
<label>First Name</label>
<input
type="name"
className="form-control"
name="first_name"
onChange={this.onChange}
value={first_name}
/>
</div>
<div className="form-group">
<label>Last Name</label>
<input
type="name"
className="form-control"
name="last_name"
onChange={this.onChange}
value={last_name}
/>
</div>
<div className="form-group">
<label>Password</label>
<input
type="password"
className="form-control"
name="password"
onChange={this.onChange}
value={password}
/>
</div>
<div className="form-group">
<label>Confirm Password</label>
<input
type="password"
className="form-control"
name="password2"
onChange={this.onChange}
value={password2}
/>
</div>
<div className="react__checkbox">
<label>Aluno</label>
<input
type="checkbox"
className="react__checkbox--input"
aluno={this.state.aluno}
onChange={this.handleChange}
/>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">
Register
</button>
</div>
<p>
Already have an account? <Link to="/login">Login</Link>
</p>
</form>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { registerBidder, createMessage })(RegisterBidder);
Мое действие для регистрации.
export const registerBidder = ({
email,
first_name,
last_name,
password,
aluno
}) => dispatch => {
// Headers
const config = {
headers: {
"Content-Type": "application/json"
}
};
// Request Body
const body = JSON.stringify({
user: { email, first_name, last_name, password },
aluno: aluno
});
console.log(body);
dispatch({ type: USER_LOADING });
axios
.post("/api/auth/registar/bidder", body, config)
.then(res => {
dispatch({
type: REGISTER_SUCCESS,
payload: res.data
});
})
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status));
dispatch({
type: REGISTER_FAIL
});
});
};