我已经安装了使用＆＃34; create-react-app＆＃34;命令，运行正常。我正在尝试在同一页面上进行登录和注册。我有一个名为Loginregistration.js的组件文件，其中包含注册表单和所有相关方法。
在LoginRegistration.js中，我有导入＆＃34; Login.js＆＃34;具有所有登录相关的html和相应的提交功能。
在html演示文稿中，它显示正常，并且两种形式都在调用各自的API＆＃34;注册/登录＆＃34;。
但是因为我根据返回响应代码映射了两个表单相关的错误消息。但是由于我在LoginRegister.js中导入了Login.js，因此根据LoginRegister.js和相应位置显示消息。
请让我知道我做错了什么。这里是两个文件代码 -
LoginRegister.js＆gt;＆gt;＆gt;＆gt;＆gt;
import React from 'react';
import DefaultLayout from '../Layout/DefaultLayout';
import { connect } from 'react-redux';
import { userSignupRequest } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
import Login from './Login';
class LoginRegister extends React.Component {
constructor(props) {
super(props);
document.title = "Login-Register";
this.errorMapping = {"101": "Unexpected error occurred. Please try again later.",
"102": "This email is already connected to a account.",
"103": "First name cannot be empty",
"104": "Incorrect first name",
"105": "Last Name cannot be empty",
"106": "Incorrect last name",
"107": "Email cannot be empty",
"108": "Incorrect email address",
"109": "Password cannot be empty",
"110": "password minimum length is 6 characters",
"111": "password maximum length is 50 characters",
"112": "Confirm password does not match",
"113": "Phone no can not be empty",
"114": "Incorrect user role"
}
this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
this.setState({ [event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
this.props.userSignupRequest(this.state);
}
render(){
console.log(this.props.registerMessage);
return (
<DefaultLayout>
<section id="page-title">
<div className="container clearfix">
<h1>My Account</h1>
<ol className="breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/Customer-list">Customer list</a></li>
<li className="active">Login</li>
</ol>
</div>
</section>
<section id="content">
<div className="content-wrap">
<div className="container clearfix">
<div className="col_one_third nobottommargin">
<Login />
</div>
<div className="col_two_third col_last nobottommargin">
<h3>Don't have an Account? Register Now.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, vel odio non dicta provident sint ex autem mollitia dolorem illum repellat ipsum aliquid illo similique sapiente fugiat minus ratione.</p>
<p id="msg">{this.state.registerMessage}</p>
<div>{this.props.registerMessage && this.props.registerMessage.status.map((msg, idx) => {
if(msg === 100) { return <span key={idx} id="succ_msg">{this.errorMapping[msg]}</span>
} else {
return <span key={idx} id="err_msg">{this.errorMapping[msg]}</span>
}
})
}</div>
<form id="register-form" name="register-form" className="nobottommargin" method="post" onSubmit={this.handleSubmit}>
<div className="col_half">
<label htmlFor="register-form-name">First Name:</label>
<input type="text" id="register-form-firstname" name="first_name" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-email">Last name:</label>
<input type="text" id="register-form-lastname" name="last_name" value={this.state.last_name} className="form-control" onChange={this.handleInputChange} required={true} />
</div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="register-form-email">Email Address:</label>
<input type="text" id="register-form-email" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} required={true} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-repassword">Phone no.:</label>
<input type="text" id="register-form-phone" name="phone_no" value={this.state.phone_no} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="register-form-password">Choose Password:</label>
<input type="password" id="register-form-password" name="password" value={this.state.password} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="register-form-repassword">Re-enter Password:</label>
<input type="password" id="register-form-repassword" name="c_password" value={this.state.c_password} className="form-control" onChange={this.handleInputChange} />
</div>
<input type="hidden" name="user_role" value={this.state.user_role} className="form-control" />
<div className="clear"></div>
<div className="col_full nobottommargin">
<button className="button button-3d button-black nomargin" id="reg-submit" name="register-form-submit" value="register">Register Now</button>
</div>
</form>
</div>
</div>
</div>
</section>
</DefaultLayout>
)
}
}
function mapStateToProps(state){
console.log("View data :"+JSON.stringify(state.data));
return {
registerMessage: state.data
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({userSignupRequest: userSignupRequest}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (LoginRegister);
Login.js是＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;
import React from 'react';
import { connect } from 'react-redux';
import { userSignInRequest } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
class Login extends React.Component {
constructor(props) {
super(props);
this.login_errorMapping = { "101": "Unexpected error occurred, Please try again later",
"102": "Incorrect email or password.",
"103": "Email cannot be empty",
"104": "incorrect email address",
"105": "Password cannot be empty",
"106": "Your account is deactivated"}
this.state = {email:'',password:''};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
this.setState({ [event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
this.props.userSignInRequest(this.state);
}
render(){
console.log(this.props.loginMessage);
return (
<div className="well well-lg nobottommargin">
<form id="login-form" name="login-form" className="nobottommargin" action="#" method="post" onSubmit={this.handleSubmit}>
<h3>Login to your Account</h3>
<div>{this.props.loginMessage && this.props.loginMessage.status.map((msg, idx) => {
return <span key={idx} id="err_msg">{this.login_errorMapping[msg]}</span>
})
}</div>
<div className="col_full">
<label htmlFor="login-form-username">Email:</label >
<input type="text" id="login-form-username" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_full">
<label htmlFor="login-form-password">Password:</label>
<input type="password" id="login-form-password" name="password" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
</div>
<div className="col_full nobottommargin">
<button className="button button-3d nomargin" id="login-form-submit" name="login-form-submit" value="login">Login</button>
<a href="#" className="fright">Forgot Password?</a>
</div>
</form>
</div>
);
}
}
function mapStateToProps(state){
console.log("View Login data :"+JSON.stringify(state.data));
return {
loginMessage: state.data
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({userSignInRequest: userSignInRequest}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (Login);
答案 0 :(得分：1)
您登录组件也使用为注册组件设置的相同错误消息，因此问题。
您需要进行一些更改，
在您的reducer中，将login和register邮件分隔为RegisterData和LoginData
然后更改mapStateToProps和Login.js中的LoginRegister.js
是
function mapStateToProps(state){
console.log("View Login data :"+JSON.stringify(state.data));
return {
loginMessage: state.LoginData
}
}
和
function mapStateToProps(state){
console.log("View Login data :"+JSON.stringify(state.data));
return {
registerMessage: state.RegisterData
}
}