如何使用onclick更改for循环中的变量？React jsx文件

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loopVariable: 0,
      data: [1, 2, 3, 4, 5]
    };
  }

  handleClick = () => {
    // 在点击事件中更新循环中的变量
    this.setState({ loopVariable: this.state.loopVariable + 1 });
  }

  render() {
    const { loopVariable, data } = this.state;

    return (
      <div>
        {data.map((item, index) => (
          <div key={index}>
            {/* 使用更新后的变量渲染循环的数据 */}
            {item + loopVariable}
          </div>
        ))}
        <button onClick={this.handleClick}>点击增加变量</button>
      </div>
    );
  }
}

export default MyComponent;