Javascript 通过React中的输入元素更新对象中的嵌套状态

我正在创建一个允许更新订单的表单。输入字段必须填充我渲染的每个对象的当前状态，并且我希望能够编辑输入字段。我已经将我的代码简化为一个输入字段，并且相信我能够使用下面的代码完成我正在尝试的大部分工作--

其中

data:Object

包含我试图更改的键值对，在本例中，键值

name

嵌套在

data:Object

（上图）下，我希望在更新/编辑后将其放回数组中。我可以稍微更新订单的名称，但是当我尝试更新它时（比如，键入“x”），对象现在有了这个结构--

---

我可以凭直觉推断，

[e.target.name]：e.target.value

可能是罪魁祸首，但是我完全不知道如何访问

data:Object

中的嵌套键

name

——我已经尝试了e.target.data.name，但是这给了我

未定义的
，并且尝试了各种其他组合。如果不使用Redux（不幸的是，由于时间限制，没有时间学习），是否有人知道我如何访问/锁定键
name
，以便更新嵌套在
数据：对象中的嵌套项？
您需要更改字段
order.data.name
，但您的代码只是在
order
对象中添加了一个新字段。替换

handleChange(e, key) {
    const order = this.props.orders[key];
    const updatedOrder = {
      ...order,
      [e.target.name]: e.target.value
    }
    this.props.updateOrder(key, updatedOrder);
}

与

{ 
  data: Object,
  meta: Object,
  __proto__: Object
}

{ 
  data: Object,
  meta: Object,
  name: "John Smithx"
  __proto__: Object
}

handleChange(e, key) {
    const order = this.props.orders[key];
    const updatedOrder = {
      ...order,
      [e.target.name]: e.target.value
    }
    this.props.updateOrder(key, updatedOrder);
}

handleChange(e, key) {
    const order = this.props.orders[key];
    let updatedOrder = { ...order };
    updatedOrder.data[e.target.name] = e.target.value;
    // or if you have only 1 field called name, you can use updatedOrder.data.name = e.target.value;
    this.props.updateOrder(key, updatedOrder);
}