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