javascript - 将动态输入表单中的数据存储到对象(React)

Question

我有一个存储在状态中的对象列表。我想以这样的格式将输入数据存储到对象中。

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value1"
    }, {
        "id":"parameter2", 
        "value":"value2"
    }]
}

问题是输入的数量不是常数。如果有 10 个输入，我的对象长度应该是 10。

(1) 在输入 id=parameter1 中输入“value1”

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value1"
    }]
}

(2) 在输入 id=parameter2 中输入“value2”

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value1"
    }, {
        "id":"parameter2", 
        "value":"value2"
    }]
}

(3) 在输入 id=parameter1 中输入“value3”

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value3"
    }, {
        "id":"parameter2", 
        "value":"value2"
    }]
}

我写了 onchange 处理函数，但是对象的长度总是等于 1。它只改变了我的对象的 id 和值。

onChangeHandlerParameter = e => {
  this.setState({ parameter:[{"id": e.target.id,"value": e.target.value}]})
}

(1) 在输入 id=parameter1 中输入“value1”

{
    "parameter" : [{
        "id":"parameter1",
        "value":"value1"
    }]
}

(2) 在输入 id=parameter2 中输入“value2”

{
    "parameter" : [{
        "id":"parameter2",
        "value":"value2"
    }]
}

Answer 1

问题在于更改处理程序

onChangeHandlerParameter = e => {
  this.setState((prevState) => {
          parameter:[
                    ...prevState.parameter,
                    {"id": e.target.id,"value": e.target.value}
                    ]
               });
}

您正在更改您的状态，但会覆盖现有状态。因此，每次您添加的也是最新的，您只会在数组中获得一项。

'...' 是扩展器运算符，在您的情况下它是数组的扩展。