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); 这行代码总是为errors.name 产生 undefined - 然后，此信息永远不会显示在网站上：

{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}})) 但您必须知道有错误的字段的名称是什么