在渲染中显示 json，并在 onChange of react 中解析用户输入

Question

我尝试在文本区域中使用map显示一堆json对象。用户可以编辑它，但我必须在传递到后端之前验证所有 json 是否有效。

我在解析它时遇到问题，我应该在哪里解析它？在onChange中解析JSON听起来不是一个好主意，如果用户输入不是有效的json，它会中断。

onChange = (e, idx) => {
this.setState({
data: this.state.data.map((o,i) => {
if(i === idx){
return JSON.parse(e.target.value) //dangerous
}
return o
})
})
}

https://codesandbox.io/s/880414y0m0

Answer 1

修复了 2.0在提交之前不应解析。否则，只要您开始键入，它就会中断。因为在某些时候，文本将不是有效的 JSON。一旦我输入{，如果我尝试解析它，它就会中断。重写。莱姆知道是否还有更多错误

import React from "react";
import { render } from "react-dom";
class App extends React.Component {
constructor() {
super();
this.state = {
data: [""]
};
this.getAllStates = this.getAllStates.bind(this);
this.addField = this.addField.bind(this);
this.removeField = this.removeField.bind(this);
}
onChange(e, ind) {
let state = { ...this.state };
let { value } = e.target;
state.data[ind] = value;
this.setState(state);
}
addField(e) {
e.preventDefault();
let state = { ...this.state };
state.data.push("");
this.setState(state);
}
removeField(e) {
e.preventDefault();
let state = { ...this.state };
if(state.data.length === 0)
{
return;
}
state.data.pop();
this.setState(state);
}
getAllStates() {
let { data } = this.state;
let output = [];
for (let i = 0; i < data.length; i++) {
try {
let item = data[i];
output.push(JSON.parse(item));
} catch (err) {
alert("One or more items are not valid JSON");
return;
}
}
//Do some stuff with output
}
render() {
return (
<div>
{this.state.data.map((val, ind) => {
return (
<div>
<br />
<textarea onChange={e => this.onChange(e, ind)} value={val} />
</div>
);
})}
<br />
<button onClick={this.addField}>Add Field</button>
<button onClick={this.removeField}>Remove Field</button>
<button onClick={this.getAllStates}>Save JSON</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>