Javascript 带有React的AJV JSON模式验证程序不工作
我是React World的新手,目前正在尝试使用AJV JSON模式验证器。当用户上传Json文件时,我将其存储到状态。然后在提交之后,我运行了验证器。虽然在cosole.log中显示了数据,但它不起作用。如果我将json硬编码到如下状态:Javascript 带有React的AJV JSON模式验证程序不工作,javascript,json,reactjs,Javascript,Json,Reactjs,我是React World的新手,目前正在尝试使用AJV JSON模式验证器。当用户上传Json文件时,我将其存储到状态。然后在提交之后,我运行了验证器。虽然在cosole.log中显示了数据,但它不起作用。如果我将json硬编码到如下状态: state = { file: {"foo": 2, "bar": 4} } 那么它工作得很好。我的代码: import React from 'react'; let Ajv = require('ajv'); // import axios f
state = {
file: {"foo": 2, "bar": 4}
}
那么它工作得很好。我的代码:
import React from 'react';
let Ajv = require('ajv');
// import axios from 'axios';
class Form extends React.Component {
state = {
file: '',
}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.file)
let ajv = new Ajv({ allErrors: true });
//Validation Rule
let validate = ajv.compile(
{
"properties": {
"foo": { "type": "string" },
"bar": { "type": "number", "maximum": 3 }
}
}
);
let valid = validate(this.state.file);
if (valid) {
console.log('Valid!');
} else {
console.log('Invalid: ' + ajv.errorsText(validate.errors));
}
}
// Handle Upload Using FileReader
handleFile = (e) => {
let reader = new FileReader();
let file = e.target.files[0];
reader.onloadend = (event) => {
console.log(event.target.result);
this.setState({
file: event.target.result
});
}
reader.readAsText(file)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="file" onChange={this.handleFile}/>
<button>Submit</button>
</form>
)
}
}
找到了解决办法。我必须使用JSON.parse()函数。
{"foo": 2, "bar": 4}