根据React.js中的API响应显示消息

问题描述 投票：0回答：2

我已经使用 

create-react-app
安装了 React。我正在使用 
onSubmit()
功能提交表单。从 
LoginRegister.js
组件提交表单时，下面是我的 LoginRegister.js 文件代码：

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



class LoginRegister extends React.Component {
    constructor(props) {
    super(props);
        this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
        //this.state = {about: ''};

        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(){
        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="/">Pages</a></li>
                            <li className="active">Login</li>
                        </ol>
                    </div>

                </section>

                <section id="content">

                    <div className="content-wrap">

                        <div className="container clearfix">
                            <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.errmsg}</p>
                                <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>
        )
    }
}

LoginRegister.propTypes = {
    userSignupRequest: PropTypes.func.isRequired    
}

export default connect((state) => { return{} }, {userSignupRequest} ) (LoginRegister);

action/signupActions 文件具有以下代码，使用 

Reducer
调用 API 并处理响应：

import axios from 'axios'; 

export function userSignupRequest(userData){
        return dispatch => {
            dispatch({"type":"CALL_START"});
            axios.post('../user/register', userData).then(response => {
              dispatch({"type":"RECEIVE_RESPONSE", "payload":response.data});
            }).catch(error => {
                dispatch({"type":"RECEIVE_ERROR", "payload":error});
            });
        }
        
    }

Reducer.js 有以下代码：

const reducer = (state={}, action) => {
    switch(action.type){
        case "CALL_START" :{
            alert("Hi1");
            return {}
            break;  
        }
        case "RECEIVE_RESPONSE" : {
            //return {...state, data:action.payload}
            alert("Hi2");
            return {data:action.payload}
            break;
        }
        case "RECEIVE_ERROR" : {
            alert("Hi3");
            alert(JSON.stringify(action.payload));
            return {data:action.payload}
            break;
        }
        
    }   
    
}   

export default reducer;

API 正在调用，我得到了正确的响应。如何根据响应在“LoginRegister.js”组件上显示成功/错误消息？

javascript css reactjs redux
2个回答
3
投票

所以我建议你做一些改变

  1. 当您使用 connect 时，您可能应该连接要调度的操作，或者通过不提供连接的第二个参数来直接在组件中调用它

  2. 获取组件中的状态。为此，您可以使用mapStateToProps

  3. 您可能希望在注册时显示正确的消息，您可以通过 

    userSignupRequest
    操作来实现。

将您的代码更改为以下

用户注册请求操作

import axios from 'axios'; 

export function userSignupRequest(userData){
        return dispatch => {
            dispatch({"type":"CALL_START"});
            axios.post('../user/register', userData).then(response => {
              dispatch({"type":"RECEIVE_RESPONSE", "payload":"Successfully Registered"});
            }).catch(error => {
                dispatch({"type":"RECEIVE_ERROR", "payload":"Error Registering " +  JSON.stringify(error)});
            });
        }

    }

登录注册

import {bindActionCreators} form 'redux';
class LoginRegister extends React.Component {
    constructor(props) {
    super(props);
        this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
        //this.state = {about: ''};

        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="/">Pages</a></li>
                            <li className="active">Login</li>
                        </ol>
                    </div>

                </section>

                <section id="content">

                    <div className="content-wrap">

                        <div className="container clearfix">
                            <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.props.registerMessage}</p>
                                <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){
      return { 
         registerMessage: state.data
      }
}
function mapDispatchToProps(dispatch) {
      return bindActionCreators({userSignupRequest: userSignupRequest}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps ) (LoginRegister);

减速机

const initialState = { 
    data: '',
    status: ''
}
const reducer = (state=initialState, action) => {
switch(action.type){
case "CALL_START" :{
alert("Hi1");
return {}
break; 
}
case "RECEIVE_RESPONSE" : {
//return {...state, data:action.payload}
return {...state, data:action.payload}
break;
}
case "RECEIVE_ERROR" : {
alert(JSON.stringify(action.payload));
return { ...state, data:action.payload}
break;
}
default: {
return state
}
} 

} 

export default reducer;
2
投票

但在这里我不知道如何根据响应在我的“LoginRegister.js”组件上显示成功/错误消息

使用 

@connect
订阅状态。

更多

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.