Javascript ReactJS-输入验证不存在'；无法验证

我正在尝试对我的表格进行验证

class Car extends Component {
    constructor() {
        super();
        this.state = {
            name: '',
            errors: {}
        }
     this.handleNameChange = this.handleNameChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.errors) {
            this.setState({
                errors: nextProps.errors
            });
        }
    }

    handleNameChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    handleSubmit(e) {
        e.preventDefault();
        const car = {
            name: this.state.name,
            ...
        }
        console.log(car);

        axios.post('/api/cars/create', car)
            .then(response => {
                console.log('response.data: ', response.data);

            }).catch(function(err) {
                console.log(err)
            });

    }

    render() {
        const { errors } = this.state;
        console.log('errors name: ', errors.name);
        ...
        return (
            <div className="container" style={{ marginTop: '50px'}}>
                <h2 style={{marginBottom: '40px'}}>Cars</h2>
                <form className="" onSubmit={ this.handleSubmit }>
                    <div className="row">
                        <div className="col-sm-3">
                            <div className="form-group"> 
                                <label>Car Name</label>
                                <input
                                    type="text"
                                    placeholder="Name"
                                    className={classnames('form-control form-control-sm', {
                                        'is-invalid': errors.name
                                    })}
                                    name="name"
                                    onChange={ this.handleNameChange }
                                    value={ this.state.name }
                                />
                                {errors.name && (<div className="invalid-feedback">{errors.name}</div>)}
                            </div>
                        </div>
                        ...
                       );
    }
}
Car = {
    //registerUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    auth: state.auth,
    errors: state.errors
});

export default connect(mapStateToProps,{ registerUser })(withRouter(Car))

如果我发送的表单包含不正确的字段（空的

名称

），我将从控制台

验证中得到消息hello

。这很好

下面是

验证/car.js

文件：

const Validator = require('validator');
const isEmpty = require('./is-empty');

module.exports = function validateCarInput(data) {
    let errors = {};
    console.log('x data.name: ', data.name);
    data.name = !isEmpty(data.name) ? data.name : '';

    if(Validator.isEmpty(data.name)) {
        errors.name = 'Name field is required';
        console.log('errors.name: ', errors.name);    
    }

    return {
        errors,
        isValid: isEmpty(errors)
    }
}

问题是什么？当我发送带有空

name

字段的表单时，这意味着该字段无效-它不能为空-NodeJS能够识别这一点，但该信息没有传递给ReactJS组件

在组件中，这行代码

console.log（'errors name:'，errors.name）始终为
错误生成未定义的。名称
-然后，此信息永远不会显示在网站上：

{errors.name && (<div className="invalid-feedback">{errors.name}</div>)}

{errors.name&（{errors.name}）}

为什么ReactJS没有看到来自NodeJS和
错误的消息。name
总是
未定义的
？
我认为您应该在请求中输入this
.catch（（error）=>this.setState（{error:{names:error}））
，但我认为名称应该是这样的
.catch（function（error）=>this.setState（{errors:{name]：error}}
但是您必须知道发生错误的字段的名称
根据axio文档，错误响应由可选的
响应
对象构成。响应对象（如果存在）应包含服务器端json验证数据，这是您想要更新组件状态的数据：

这可能与进行以下更改一样简单：

axios.post('/api/cars/create', car)
.then(response => {
  console.log('response.data: ', response.data);

})
.catch((error) => { // Use arrow function to simplify setState access 

  // If error contains response data, attempt to extract server
  // side validation to update component state
  if(error.response) {
    this.setState({ errors : error.response.data })
  }
  else {
    console.log(error)
  }
})

有关axio错误处理的更多信息，请参阅此
当服务器端验证失败时，是否执行了此
控制台.log
.catch（function（err）{console.log（err）}）
Hi@dacreeny，yes-这是输出：
错误：请求失败，状态代码400
@user2932090您的服务器响应是什么样子的？@xde服务器响应是
{name:'name field is required}
-看起来我无法将此对象从服务器添加到
setState
。当我尝试
this.setState（{errors:err.response.data}）
时，我得到了
未处理的拒绝（TypeError）：无法读取未定义的
@user2932090 hmm的属性“setState”，我对react不太熟悉，因为我更喜欢它。但根据我的经验，如果服务器发送400，那么我的服务器响应将深深陷入响应的属性错误中。因此，在您的情况下，服务器可能会在
respond.error.name
中响应。可以肯定的是，你能
控制台。记录这一点吗？我想在你提到的那一行中，
err
中只有这条消息：
错误：请求失败，状态代码为400
——某种通用消息（不确定它来自何处）。但是，如果我从验证器打印出错误消息，我会得到以下信息：
{name:'name field is required'}
--并且不知何故没有传递此消息以作出反应。谢谢@DacreDenny，这似乎是正确的方法。但是，当我尝试像这样更新
setState
时，我得到
未处理的拒绝（TypeError）：无法读取未定义的
的属性“setState”。似乎将对象分配给状态对象时出现问题。您好，不客气-您是否将
catch
函数更改为箭头函数？像这样
.catch（（错误）=>{
哦，哇，我没有！我忽略了它！谢谢，它现在可以工作了；）我是ReactJS/NodeJS新手，所以我没有完全理解箭头函数等的概念，所以这也有点让人困惑。很高兴听到它现在可以工作了-是的，箭头函数略有不同，它们有一些有趣的属性，但在这种情况下非常有用：-）
axios.post('/api/cars/create', car)
.then(response => {
  console.log('response.data: ', response.data);

})
.catch((error) => { // Use arrow function to simplify setState access 

  // If error contains response data, attempt to extract server
  // side validation to update component state
  if(error.response) {
    this.setState({ errors : error.response.data })
  }
  else {
    console.log(error)
  }
})