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

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

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

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

这样，您的代码将可以正常工作，并且我们确保不直接改变状态（这是最佳做法），我们将以不可变的方式对其进行编辑。

快乐黑客！

将数据从动态输入表单存储到对象（反应）

3 个答案: