Javascript 将变量映射到React中的状态

我在将某个值映射到状态时遇到问题。例如，在我的状态上使用此json变量（这只是一个示例，不需要理解json变量）：

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

假设我想更改状态变量的person.nose atribute

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

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

新编辑：

因此，现在我遇到了这个问题。这是一个比第一个更现实的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":""}

---

问题：第一个名称未读取，ieventhandlerclass位于iaobjectfactory内，它不应该代码的问题是，它将在状态下创建一个新变量

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

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

它将做的是，它将保持所有键值对不变，只更新

person.nose

值

更新：

您正在尝试更新

person.iaobjectfactory.name

的值，而不是

person.name

，因此需要保留

person.iaobjectfactory

的所有键值，并且一次只更新一个，如下所示：

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

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

---

那么，对象的每个父属性都有多个输入？鼻子和腿的输入？假设在我的例子中，一个人有皮肤，但是一条腿也有皮肤，在上面有两个同名的变量有问题吗？不，你可以使用同一个键任意次数，但级别不同，我的意思是在

person.skin、person.leg.skin或person.legs.foot.skin

中。同一级别上不可能有重复的密钥。您试图更新的是

iaobjectfactory

的哪个密钥？它仍然有问题@Mayank Shukla。谢谢大家的帮助！我共享的方法不是在任何级别更新任何值的常用方法，它非常特定于嵌套的情况。通过单个函数处理所有键值更新（在嵌套json的情况下）将非常复杂。

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