如何在基于类的组件中向现有状态添加带有键和值对的新对象？

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' }
      ]
    };
  }

  addNewObject = () => {
    // 获取当前状态的副本
    const { data } = this.state;
    const newData = [...data];
    
    // 创建新的对象
    const newObj = { id: 3, name: 'Smith' };

    // 向副本中添加新对象
    newData.push(newObj);

    // 更新状态
    this.setState({ data: newData });
  }

  render() {
    return (
      <div>
        <button onClick={this.addNewObject}>添加新对象</button>
        <ul>
          {this.state.data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default MyComponent;