获取错误 - TypeError：this.props.registerMessage.map不是一个函数

Question

我通过节点api获取响应，如 - {“status”：[102,103]}。现在我试图访问这些返回状态，并希望根据响应代码显示相应的消息。 但是，让 - TypeError: this.props.registerMessage.map is not a function

这里是我的文件代码 -

import React from 'react'; 
import DefaultLayout from '../Layout/DefaultLayout'; 
import { connect } from 'react-redux'; 
import { userSignupRequest } from '../actions/signupActions'; 
import { bindActionCreators } from 'redux'; 

class LoginRegister extends React.Component { 
    constructor(props) { 
    super(props); 
     this.errorMapping = {'102': "Password Error", '103': "User name Error"} 
     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="content"> 

        <div className="content-wrap"> 

          <div className="col_two_third col_last nobottommargin"> 

           <h3>Dont 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.map((msg, idx) => { return (<span>{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); 

从reducer.js文件我回到这一点 -

return {...state,data:action.payload.status} 
      break; 

所以，registerMessage变量获取状态对象的数组。

后申请 -

{this.props.registerMessage.map((msg, idx) => { return (<span>{this.errorMapping[msg]}</span>)})} 

其显示在控制台上相应的错误。

请让我知道我做错了什么。从API响应

Answer 1

状态可能无法使用开始，因此你需要在数据映射之前进行检查，当你登录`应该做的伎俩

{this.props.registerMessage && this.props.registerMessage.map((msg, idx) => { return (<span>{this.errorMapping[msg]}</span>)})}