Question

Express 发送 json 但客户端收到未定义

2017-07-13

143

javascript json reactjs express promise

我遇到了一个非常令人沮丧的问题。 Express 服务器上的简单 json 常量作为 json 对象发送，但是当接收此对象并尝试在客户端上从中提取错误时，来自服务器的 json 对象显示为 undefined ，我怎么也想不出原因。

似乎将服务器中的 res.status(400).json(errors); 更改为 res.json(errors); 并从 isValid 为的客户端代码块中提取错误数据，我能够获取错误消息 - 因此，发送 400 状态可能与此有关。

还有其他人遇到过这个问题吗？我很感激任何关于如何解决的建议。

Express - api.js

 if( isValid ) {
      res.json({success: true});
 } else {
      const errors = { username: 'This field is required',
                       email: 'Email is invalid' };

     res.status(400).json(errors);
 }

SignupForm 组件

    this.setState({errors: {}, isLoading: true});
    this.props.userSignupRequest(this.state).then(
                    () => {
                        this.props.history.push('/');
                    },
                    ({data}) => {
                        console.log(data); //undefined
                        this.setState({errors: data, isLoading: false})
                    }
                )

SignupAction.js

import axios from 'axios';

export function userSignupRequest(userData) {
    return dispatch => {
        return axios.post('http://myhost/api/signup', userData);
    }
}

Answer 1

根据 Axios 手册 :

When using catch , or passing a rejection callback as second parameter of then , the response will be available through the error object as explained in the Handling Errors section.

因此:

this.props.userSignupRequest(this.state).then(
                () => {
                    this.props.history.push('/');
                },
                error => {
                  const {data} = error.response;
                  console.log(data);
                  this.setState({errors: data, isLoading: false});
                }
            )