React Forms:如何将输入数据作为具有相同输入名称的列表对象

Question

我将输入数据发布到API，其中API的结构为n个对象的数组列表。

问题：我面临的问题是，在处理更改时，我正在替换数据，而不是作为另一个对象插入。

我的代码如下：

列表中的对象是动态的，不限于两个

在Constructor中->

this.state={
formData: [
{
information: "",
from: "",
to: "",
},
{
information: "",
from: "",
to: "",
},
],
}

按照以下方式处理变更：

handleChange = (e) => {
const { name, value } = e.target;
const { formData} = this.state;
this.setState({
formData: {
...formData,
[name]: value,
},
});

处理提交：

handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.formData);
}

表单字段如下：

<form onSubmit={this.handleSubmit}>
<div>
<input  type="text"   name="information"   onChange={this.handleChange}   />
<input  type="text"   name="from"          onChange={this.handleChange}   />
<input  type="text"   name="to"            onChange={this.handleChange}   />
</div>
<div>
<input  type="text"   name="information"   onChange={this.handleChange}   />
<input  type="text"   name="from"          onChange={this.handleChange}   />
<input  type="text"   name="to"            onChange={this.handleChange}   />
</div>
.
.
.
<button> + Add new Set (div) </button>
<button type="submit"> Submit </button>
</form>

我知道错误是在处理逻辑问题，但我试了很多办法来纠正。请帮帮我。

编辑：预期输出：

[
{                    
"information": "info  1",
"from": 1,
"to": 50
},
{                    
"information": "info  2",
"from": 51,
"to": 80
},
{
"information": "info  3",
"from": 81,
"to": 100
}
]

Answer 1

如果要将第三个对象插入formData，则需要将大括号｛｝添加到框架[name]:value中作为对象。此外，formData是一个数组，因此它必须使用方括号，而不是花括号。

this.setState({
formData: [
...formData,
{ [name]: value }
],

Answer 2

最好的方法是在setState中使用prevState。

this.setState(prevState => ({...prevState, [name]: value }))

这将保证您始终使用以前的状态。setState是一个异步函数，如果您使用formData，它将不能保证您已经调度的更改已经到位。

Answer 3

state={
formData: [
{
information: "",
from: "",
to: "",
},
{
information: "",
from: "",
to: "",
},
],
information:"",
from:"",
to:""
}

...
<input  type="text"   name="information"   onChange={(event)=>{this.setState({information:event.target.value})}   />
<input  type="text"   name="from"          onChange={(event)=>{this.setState({from:event.target.value})}  />
<input  type="text"   name="to"            onChange={(event)=>{this.setState({to:event.target.value})}   />
...
handleSubmit = (e) => {
e.preventDefault()
const data={  information: this.state.information,
from: this.state.form,
to: this.state.to}
this.setState({formData:[this.state.formData,data]})
console.log(this.state.formData);
}