如何在React onClick中删除和添加相同的事件侦听器，而不是无限堆叠？

handleClick = () => {
  // 处理点击事件
}

componentDidMount() {
  document.addEventListener('click', this.handleClick);
}

componentWillUnmount() {
  document.removeEventListener('click', this.handleClick);
}

import React, { Component } from 'react';

class MyComponent extends Component {
  handleClick = () => {
    // 处理点击事件
  }

  componentDidMount() {
    document.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
  }

  render() {
    return (
      <div>
        {/* 组件的内容 */}
      </div>
    );
  }
}

export default MyComponent;