在reactjs中点击按钮，如何取消对api的调用？

const [apiRequest, setApiRequest] = useState(null);

const handleClick = () => {
  const request = fetch('https://api.example.com/data');
  setApiRequest(request);
};

const controller = new AbortController();

const handleClick = () => {
  const request = fetch('https://api.example.com/data', { signal: controller.signal });
  setApiRequest(request);
};

const handleCancel = () => {
  controller.abort();
};

useEffect(() => {
  return () => {
    if (apiRequest) {
      apiRequest.abort();
    }
  };
}, [apiRequest]);