在react.js的同一頁上處理兩個窗體的錯誤消息

Question

我已經使用「create-react-app」命令安裝了反應，它的運行正常。我正在嘗試在同一頁面上進行登錄和註冊。我有一個名爲Loginregistration.js的組件文件，它具有註冊表單和所有相關方法。

在LoginRegistration.js我有導入「Login.js」具有所有登錄相關的html和各自的提交功能。

在html的演示文稿中，它顯示的很好，兩種形式都調用它們自己的各自的API「註冊/登錄」。

但是，因爲我已根據返回響應代碼映射了兩個窗體相關的錯誤消息。但是，因爲我在LoginRegister.js中導入了Login.js，所以它顯示的消息也是按照LoginRegister.js和相應的地方顯示的。

請讓我知道我做錯了什麼。這裏是這兩個文件的代碼 -

LoginRegister.js >>>>>

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是>>>>>>

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); 

Answer 1

您登錄組件也使用相同錯誤信息是爲寄存器組件設置的，因此也是問題。

你需要做一些修改，

在你減速，分離login和register消息爲RegisterData和LoginData ，然後更改Login.js和LoginRegister.js 的mapStateToProps是

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 
    } 
} 

分別