如何在React Redux中顯示來自節點js的錯誤響應

Question

我對React / Redux相當陌生，我對這種簡單的形式感到困惑。即使我從Node JS服務器獲取錯誤數據，但錯誤狀態始終是不確定的，沒有錯誤數據我無法設置狀態。 路線/users.js

import express from 'express';
import Validator from 'validator';
import isEmpty from 'lodash/isEmpty'



    let router = express.Router();
function ValidateInput(data) {
 let errors = {};
        if(isEmpty(data.email)){
             errors.email = 'This fiels is required'
        }
        if(!Validator.isEmail(data.email)){
            errors.email = "Email is in Valid"
        }
    if(isEmpty(data.password)){
        errors.password = 'This fiels is required'
    }
    if(isEmpty(data.passwordConfirmation)){
        errors.passwordConfirmation = 'This fiels is required'
    }
    if(!Validator.equals(data.password,data.passwordConfirmation)){
        errors.passwordConfirmation = "Password Must Macthc"
    }
    if(isEmpty(data.timezone)){
        errors.timezone = 'This fiels is required'
    }


 return{
  errors,
  isValid:isEmpty(errors)
 }
}
router.post('/',(req,res) => {
    console.log(req)
     const {errors,isValid} =  ValidateInput(req.body);
    if(!isValid){
        res.status(400).json(errors)
    }

});


export default router

SignupForm.js

import React from 'react';
import timezones from  '../../data/timezone';
import map from 'lodash/map';


class SignupForm extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            username:'',
            email:'',
            password:'',
            passwordConfirmation:'',
            timezone:'',
            errors:{}

        };
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this)
    }
    onChange(e){
        this.setState({ [e.target.name]:e.target.value })
    }
    onSubmit(e){

        e.preventDefault();
        this.setState({ errors:{} });
       this.props.userSignupRequest(this.state).then(function (data) {
           console.log(data)//Nothing
           // this.setState({
           //     errors:data
           // })
       })

    }
    render(){
        console.log(this.state)
        const options = map(timezones,(val,key) =>
             <option key={val} value={val}>{key}</option>

        );

        return(
            <form onSubmit={this.onSubmit}>
                <h1>Join our community</h1>
                <div className="form-group">
                    <label className="control-label">Username</label>
                    <input
                        type="text"
                        name="username"
                        className="form-control"
                        value={this.state.username}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label className="control-label">Email</label>
                    <input
                        type="text"
                        name="email"
                        className="form-control"
                        value={this.state.email}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label className="control-label">Password</label>
                    <input
                        type="password"
                        name="password"
                        className="form-control"
                        value={this.state.password}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label className="control-label">passwordConfirmation</label>
                    <input
                        type="password"
                        name="passwordConfirmation"
                        className="form-control"
                        value={this.state.passwordConfirmation}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label className="control-label">Time Zone</label>
                    <select
                      className="form-control"
                      name="timezone"
                      onChange={this.onChange}
                      value={this.state.timezone}
                    >
                        <option value="" disabled>Choose Your Timezone</option>

                        {options}
                   </select>
                </div>
                <div className="form-group">
                    <button className="btn btn-primary btn-lg">
                        SignUp
                    </button>
                </div>
            </form>
        )
    }
}
SignupForm.propTypes ={
    userSignupRequest:React.PropTypes.func.isRequired
};

export default SignupForm

Answer 1

您需要使用catch ...

onSubmit(e){

   e.preventDefault();
   this.setState({ errors:{} });
   this.props.userSignupRequest(this.state)
      .then(function (data) {
          //Success here
      })
      .catch(({response}) => console.log(response.data)) //Here you get your errors
   })

}