如何从React组件中的映射项中执行setState

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['item 1', 'item 2', 'item 3'],
    };
  }

  handleClick(index) {
    // 从映射项中获取要更新的数据
    const newItem = this.state.items[index] + ' updated';

    // 更新状态
    this.setState(prevState => {
      // 复制当前的状态对象
      const updatedItems = [...prevState.items];

      // 更新映射项中的对应数据
      updatedItems[index] = newItem;

      // 返回新的状态对象
      return {
        items: updatedItems,
      };
    });
  }

  render() {
    return (
      <div>
        {this.state.items.map((item, index) => (
          <div key={index}>
            <span>{item}</span>
            <button onClick={() => this.handleClick(index)}>Update</button>
          </div>
        ))}
      </div>
    );
  }
}

export default MyComponent;