ReactJS - проверка ввода не проверяется

Question

Я пытаюсь проверить свою форму.

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))

Затем в car.js у меня есть следующее:

const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const passport = require('passport');
const validateCarInput = require('../validation/car');

const Car = require('../models/Car');

router.post('/create', function(req, res) {
    console.log('in /create');
    console.log('req.body.name: '+req.body.name);

    const { errors, isValid } = validateCarInput(req.body);

    if(!isValid) {
        console.log('hello from validation');
        return res.status(400).json(errors);
    }
    ...

Если я отправлю форму с неправильными полями (пусто name), я получу здесь сообщение с консоли hello from validation. Это хорошо здесь.

А вот еще файл validations/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); всегда выдает undefined для errors.name - и затем эта информация никогда не отображается на веб-сайте:

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

Почему ReactJS не видит сообщения от NodeJS и errors.name всегда undefined?

Answer 1

Согласно документации Axio, ответы на ошибки структурированы с помощью необязательного объекта response. Объект ответа, если таковой имеется, должен содержать данные проверки 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, см. https://github.com/axios/axios#handling-errors

Answer 2

Я думаю, что вы должны поставить в запросе это .catch((error) => this.setState({error: {names: error}})), но я думаю, что имя должно быть таким .catch(function(error) => this.setState({errors: {[name]: error}})), но вы должны знать, как называется поле с ошибкой