ReactJS如何更新数组中object中的状态

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, name: 'Item 1', status: 'active' },
        { id: 2, name: 'Item 2', status: 'inactive' },
        { id: 3, name: 'Item 3', status: 'active' }
      ]
    };
  }

  updateStatus = (itemId, newStatus) => {
    const updatedItems = this.state.items.map(item => {
      if (item.id === itemId) {
        return { ...item, status: newStatus };
      }
      return item;
    });

    this.setState({ items: updatedItems });
  };

  render() {
    return (
      <div>
        {this.state.items.map(item => (
          <Item
            key={item.id}
            item={item}
            updateStatus={this.updateStatus}
          />
        ))}
      </div>
    );
  }
}

class Item extends Component {
  handleClick = () => {
    const { item, updateStatus } = this.props;
    const newStatus = item.status === 'active' ? 'inactive' : 'active';
    updateStatus(item.id, newStatus);
  };

  render() {
    const { item } = this.props;
    return (
      <div>
        <span>{item.name}</span>
        <button onClick={this.handleClick}>Toggle Status</button>
      </div>
    );
  }
}

export default MyComponent;