javascript - React の入力要素を介してオブジェクトのネストされた状態を更新する

Question

注文を更新できるフォームを作成しています。入力フィールドには、レンダリングする各オブジェクトの現在の状態を入力する必要があり、入力フィールドを編集できるようにしたいと考えています。私は自分のコードを 1 つの入力フィールドだけに単純化し、次のコードを使用して試みていることの大部分を実行できると信じています -

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
}

Wheredata: Objectには、変更しようとしているキーと値のペアが含まれています。この場合、キーは (上)nameの下にネストされdata: Objectており、更新/編集したら配列に戻します。注文の名前を少し更新することはできますが、更新しようとすると (たとえば、「x」を入力すると)、オブジェクトはこの構造になりました --

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

おそらくそれが原因であると直感でき[e.target.name]: e.target.valueますが、ネストされたキーnameにアクセスする方法について完全に途方data: Objectに暮れています-e.target.data.nameを試しましたが、それは私に与えundefinedて試しました他にもいろいろな組み合わせ。Redux を使用せずに (残念ながら時間の制約のために学習する時間がありません)、nameネストされた を更新するためにキーにアクセス/ターゲットする方法を知っている人はいdata: Objectますか?