Javascript 反应表单：如何使输入数据成为具有相同输入名称的列表对象？

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

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

我的代码如下：

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

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

在构造函数中->

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>

---

如果要将第三个对象插入formData，则需要将花括号{}作为对象添加到frame

[name]：value

。另外，

formData

是一个数组，因此它必须使用方括号，而不是花括号

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

---

最好的方法是在

setState

中使用

prevState

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

这将保证您始终使用以前的状态

setState

是一个异步函数，如果使用

formData

，则不能保证已分派的更改已到位以供使用。

状态={
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);
    }

表格数据：[
{
资料：“，
从：“，
至：“，
},
{
资料：“，
从：“，
至：“，
},
],
资料：“，
从：“，
致：“”
}
...
{this.setState（{information:event.target.value}）}/>
{this.setState（{from:event.target.value}）}/>
{this.setState（{to:event.target.value}）}/>
...
handleSubmit=（e）=>{
e、 预防默认值（）
const data={information:this.state.information，
来源：this.state.form，
to:this.state.to}
this.setState（{formData:[this.state.formData，data]}）
console.log（this.state.formData）；
}

您正在将formData从数组更改为handleChange函数中的对象。您想只是附加和对象还是复制一些东西？您需要某种跟踪来跟踪输入的更改。因为在您的输入中，名称不是唯一的identifier@Viktor我需要附加新的，如果用户点击add按钮，这些输入应该在[]中{}，然后你应该做一些类似于

this.setState（[…formState，{}]）的事情。

@Viktor on submit，returing空数组