React에서 입력 요소를 통해 객체의 중첩 상태 업데이트

Question

주문을 업데이트 할 수있는 양식을 만듭니다. 입력 필드는 렌더링하는 각 객체의 현재 상태로 채워 져야하며 입력 필드를 편집 할 수 있어야합니다.

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 내가 변화하기 위해 노력하고있어 키 - 값 쌍을 포함

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

을의 name 위의 data: Object 아래에 중첩되어 있으며 배열에 다시 넣고 싶습니다. 업데이트/편집.

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

내가 [e.target.name]: e.target.value 것을 직관적으로 할 수 아마도입니다 - 내가 그것을 업데이트 할 때 객체 지금이 구조를 가지고있다 (에 'X'는 말, 입력은) 그러나 주문의 이름을 업데이트 할 약간 수 있어요 범인, 그러나 나는 완전히 내가 중첩 된 키 namedata: Object에 액세스 할 수있는 방법에 대한 손실에있어 - 내가 시도했다 e.target.data.name, 그러나 그 날 undefined주고 다양한 시도했다 조합. Redux를 사용하지 않고 (불행히도 시간 제약으로 인해 배울 시간이 없다) 누구도 name에 액세스하여/대상을 지정하여 data: Object에 중첩되도록 업데이트 할 수 있습니까?

Answer 1

order.data.name 필드를 변경해야하지만 코드는 order 개체에만 새 필드를 추가하는 것입니다.

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

와

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

교체