将数据从动态输入表单存储到对象（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 和 value。

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

问题在于 on change 处理程序

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

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

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

Answer 2

您应该将项目（推送）添加到parameter 数组，当前代码只是将新值放入整个数组。

可以改成这样：

onChangeHandlerParameter = e => {
   const { parameter } = this.state;
   parameter.push({"id": e.target.id,"value": e.target.value})
   this.setState({ parameter })
}

Answer 3

当你这样写时

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

您实际上是在覆盖现有状态，这不起作用，它始终会保留您最后输入的数据。

要完成这项工作，您需要使用扩展运算符稍微调整一下。

修复：

    onChangeHandlerParameter = e => {
    const currentState = {...this.state};
    const edittedParametersList = [...currentState.parameter];
    let element = {};
    element.id = e.target.id;
    element.value = e.target.value;
    edittedParametersList.parameter.push(element);
    this.setState(edittedParametersList);
  }

这样你的代码就可以工作，而且我们确保我们不会直接改变状态（这是一个最佳实践），我们正在以不可变的方式对其进行编辑。

黑客攻击愉快！