2

我将输入数据发布到 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
        }
    ]
4

3 回答 3

1

如果要向 formData 插入第三个对象，则需要将大括号 {}[name]:value作为对象添加到框架中。也是formData一个数组，所以它必须带有方括号而不是大括号。

this.setState({
        formData: [
          ...formData,
          { [name]: value }
        ],
于 2020-08-31T11:51:59.997 回答
1 
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);
    }
于 2020-08-31T12:27:06.517 回答
1

最好的方法是prevState在setState.

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

这将保证您始终使用以前的状态。setState是一个异步函数，如果你使用formData它并不能保证你已经派发的更改是可以使用的。

于 2020-08-31T11:58:51.347 回答