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

我正在创建一个允许更新订单的表单。输入字段必须用我呈现的每个对象的当前状态填充，并且我希望能够编辑输入字段。我简化了我的代码只是一个输入字段，并相信我能够做到大部分什么，我用下面的代码尝试的 -通过React中的输入元素更新对象中的嵌套状态

class EditOrderForm extends React.Component { 
    ... 

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

    renderEditOrderForm(key) { 
    const order = this.props.orders[key] 
    return (
     <div key={key}> 
     <form > 
      <input type="text" name="name" value={order.data.name} placeholder="order name" onChange={(e) => this.handleChange(e, key)} /> 
      ... 
     </form> 
     </div> 
    ) 
    } 

    render() { 
    return (
     <div> 
     <h2>Edit Orders</h2> 
     { 
      Object.keys(this.props.orders).map(this.renderEditOrderForm) 
     } 
     </div> 
    ) 
    } 
} 

*************Parent Component************* 

class AppComponent extends React.Component { 
import EditOrderForm from './EditOrderForm'; 
... 

    updateOrder(key, updatedOrder) { 
    const orders = [...this.state.orders] 
    orders[key] = updatedOrder; 
    this.setState({ orders: orders }); 
    } 

... 
}

某个设定在父组件级别的状态是对象为我传递给renderEditOrderForm()对象的数组和数据结构，具有结构 -

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

凡data: Object包含我试图改变键值对，在这种情况下，键name嵌套在data: Object（上面），我想把它放回数组一次更新/编辑。我稍微能然而，更新订单的名字时，我尝试更新它（比如，输入“X”）的对象现在具有这种结构 -

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

我可以直觉的[e.target.name]: e.target.value可能是罪魁祸首，但是我完全不知所措，我应该如何访问嵌入式密钥namedata: Object - 我试过e.target.data.name，但是这给了我undefined并尝试了各种其他组合。没有使用Redux（不幸的是没有时间学习，由于时间限制），有没有人知道我如何访问/目标的关键name为了更新嵌套在data: Object？

来源

2017-05-03 Street.lit

您需要更改字段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); 
}

与

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

来源

2017-05-03 09:17:16 Rubbal

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

回答

相关问题