React -更新数组内对象内的对象

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myArray: [
        { id: 1, name: 'Object 1', data: { prop: 'Value 1' } },
        { id: 2, name: 'Object 2', data: { prop: 'Value 2' } },
        { id: 3, name: 'Object 3', data: { prop: 'Value 3' } }
      ]
    };
  }

  updateObjectProp = () => {
    const { myArray } = this.state;
    const updatedArray = [...myArray]; // 创建原始数组的副本

    // 找到要更新的对象
    const objectToUpdate = updatedArray.find(obj => obj.id === 2);

    if (objectToUpdate) {
      // 创建原始对象的副本
      const updatedObject = { ...objectToUpdate };
      
      // 更新对象内的属性
      updatedObject.data.prop = 'New Value';

      // 将更新后的对象设置回副本数组中
      const updatedArray = myArray.map(obj => (obj.id === 2 ? updatedObject : obj));
      
      // 更新组件状态
      this.setState({ myArray: updatedArray });
    }
  }

  render() {
    // 渲染组件的代码
  }
}