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

如何解决React Forms：如何使输入数据作为具有相同输入名称的列表对象？

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

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

我的代码如下：

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

在构造函数->

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

按如下方式处理更改：

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
        }
    ]

解决方法

如果要在formData中插入第三个对象，则需要在框架[name]:value上添加大括号{}作为对象。另外，formData是一个数组，因此它必须带有方括号而不是大括号。

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

,

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

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

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

,

N = max(N1,N2)