useEffect调用不同的接口onClick

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  const handleClick1 = () => {
    // 调用接口1的逻辑
  };

  const handleClick2 = () => {
    // 调用接口2的逻辑
  };

  useEffect(() => {
    // 监听点击事件
    document.getElementById('button1').addEventListener('click', handleClick1);
    document.getElementById('button2').addEventListener('click', handleClick2);

    // 清除监听
    return () => {
      document.getElementById('button1').removeEventListener('click', handleClick1);
      document.getElementById('button2').removeEventListener('click', handleClick2);
    };
  }, []);

  return (
    <div>
      <button id="button1">按钮1</button>
      <button id="button2">按钮2</button>
      <div>{data}</div>
    </div>
  );
};

export default MyComponent;