在react中呈现按钮列表时的意外行为

class ButtonList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { buttons: ['Button 1', 'Button 2'] };
  }

  addButton = () => {
    this.setState(prevState => ({
      buttons: [...prevState.buttons, `Button ${prevState.buttons.length + 1}`]
    }));
  };

  render() {
    return (
      <div>
        {this.state.buttons.map((button, index) => (
          <button key={index}>{button}</button>
        ))}
        <button onClick={this.addButton}>Add Button</button>
      </div>
    );
  }
}

const Button = React.memo(({ label }) => {
  return <button>{label}</button>;
});

class ButtonList extends React.Component {
  handleClick = (event) => {
    console.log(event.target.textContent);
  };

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

{this.state.buttons.map((button, index) => (
  <button key={button}>{button}</button>
))}