Question

我在将特定值映射到状态时遇到问题，例如，在我的状态上使用此json var（仅作为示例，不需要理解json变量）：

this.state={
 person:
            {
                nose:'',
                legs:{
                    knees:'',
                    foot:{
                        finger:'',
                        nail:''
                    }
                }
            }
   }

我想要做的是通过用户输入在前端创建这个“人”，然后将其发送到后端，但是我遇到了问题。

想象一下，我想更改状态变量的person.nose属性。

用户使用此输入字段写信息：

<input name={props.name} onChange={handleChange} type="text" className="form-control" />

这是我对同一组件的调用：

       <TextInput name="nose" onChange={this.handleChange} />

当执行handleChange方法时，我无法更新该变量，该变量始终为空，我曾尝试在textInput的名称字段上使用“名称”，“ this.state.person.nose”，但没有任何反应，其始终为空

这是我的handleChange方法：

 handleChange(evt) {
    this.setState({ [evt.target.name]: evt.target.value });
}

新编辑：

所以，现在我遇到了这个问题。这是比第一个对象更现实的json对象：

{
            name: '',
            iaobjectfactory: {
                institution: '',
                parameter: [{
                    value: '',
                    classtype: ''
                }],
                name: '',
                usedefaultinstitution: '',
                methodname: ''
            },
            ieventhandlerclass: ''
        }

这是我的前端应该给我的输出，但这是最新的解决方案返回给我的东西：

{
"name":"d",
"iaobjectfactory":{
    "institution":"",
    "parameter":[
        {
        "value":"",
        "classtype":""
        }
        ],
    "name":"",
    "usedefaultinstitution":"",
    "methodname":""},
"ieventhandlerclass":"d",
"institution":"d",
"methodname":"d",
"usedefaultinstitution":"d"

}

应该在iaobjectfactory上的值不在其范围内，我不知道为什么，我使用了此方法：

 handleChange(evt) {
    const { name, value } = evt.target;

    // use functional state
    this.setState((prevState) => ({
        // update the value in eventType object
        eventType: {
            // keep all the other key-value pairs
            ...prevState.eventType,
            // update the eventType value

            [name]: value
        }
    }))

编辑2：

这是现在的json输出。

{
 "name":"",
 "iaobjectfactory":{
 "institution":"bb",
 "parameter":[
     {"value":"",
     "classtype":""
     }],
 "name":"bb",
 "usedefaultinstitution":"bb",
 "methodname":"bb",
 "ieventhandlerclass":"aa"},
"ieventhandlerclass":""}

问题：名字不可读，并且ieventhandler类位于iaobjectfactory内部，因此不应该

Answer 1

您的代码有问题，它将在状态下创建一个新变量nose并将值分配给该键。您可以使用this.state.nose访问输入值。

更新嵌套状态并不是那么容易，您必须注意所有其他键值对。在您的情况下，nose将可以访问this.state.person.nose，因此您需要更新person.nose的值而不是nose的值。

您需要这样写：

this.handleChange(evt) {
    const { name, value } = evt.target;

    // use functional state
    this.setState((prevState) => ({
        // update the value in person object
        person: {
            // keep all the other key-value pairs
            ...prevState.person,
            // update the person value
            [name]: value
        }
    }))
}

它将执行的操作是，它将所有键-值对保持不变，并且仅更新person.nose值。

更新：

您正尝试更新person.iaobjectfactory.name而不是person.name的值，因此您需要保留person.iaobjectfactory的所有键值并一次仅更新一个，如下所示：< / p>

handleChange(evt) {
  const { name, value } = evt.target;

  // use functional state
  this.setState((prevState) => ({
    // update the value in eventType object
    eventType: {

      // keep all the other key-value pairs of eventType
      ...prevState.eventType,

      // object which you want to update
      iaobjectfactory: {

        // keep all the other key-value pairs of iaobjectfactory
        ...prevState.eventType.iaobjectfactory,

        // update
        [name]: value
      }
    }
  }))
}

在React中将变量映射到状态

1 个答案: