ReactJS -输入验证不验证
ReactJS -输入验证不验证
提问于 2018-08-30 08:29:59
我正在尝试对我的表单进行验证。
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)，我将在此处收到来自console 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组件。
在组件中，这行代码总是为errors.name生成未定义的-然后，这些信息永远不会显示在网站上：
{errors.name && (<div className="invalid-feedback">{errors.name}</div>)}为什么ReactJS看不到来自NodeJS的消息，而errors.name总是undefined
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-30 09:17:26
根据axio文档，错误响应由一个可选的response对象构成。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
Stack Overflow用户
发布于 2018-08-30 08:57:40
我认为您应该将此.catch((error) => this.setState({error: {names: error}}))放入请求中，但我认为名称应该类似于此.catch(function(error) => this.setState({errors: {[name]: error}}))，但您必须知道出现错误的字段的名称
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52087729
复制相关文章
相似问题