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

Question

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

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

我的代码如下：

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

在构造函数中->

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);
    }