Question

我通过Node api获得响应 - {＆＃34; status＆＃34;：[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>)})}

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

请让我知道我做错了什么。

Answer 1

来自API响应的

状态最初可能不可用，因此您需要在映射数据之前执行检查，这应该可以解决问题

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

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

1 个答案: