如何在React严格模式下实现事件中可取消的API调用

我需要在React组件的事件处理器中（而非直接在useEffect里）实现API请求的发送、接收与处理，具体需求如下：

• 使用Axios发送异步请求
• 组件卸载时能自动取消未完成的请求
• 方案需适配React严格模式（允许请求被触发两次，若能实现仅发送一次则更佳）

当前我的实现存在问题：AbortController在组件根作用域实例化，目的是让useEffect的清理函数和事件处理器都能访问到它，但在严格模式下，abortController.abort()会被立即调用，直接阻止了请求发送。

骨架组件代码如下：

import { useState, useEffect } from 'react'
import { Button } from 'react-bootstrap'
import { ServiceContainer } from '../../../services/ServiceContainer.ts'

function Login(props: { serviceContainer: ServiceContainer }) {

    const [ email, setEmail ] = useState("");

    const abortController: AbortController = new AbortController();

    function onSuccess() {
        // 处理成功逻辑
    }

    function onFailure() {
        // 处理失败逻辑
    }

    function onButtonClick() {
        
        // 内部调用Axios发送请求
        props.serviceContainer.ApiClient.SomeAction(email, abortController, onSuccess, onFailure);
    }

    useEffect(() => {
        return () => {
            abortController.abort();
        };
    });

    return(
        <Button onClick={onButtonClick}>Click me!</Button>
    );
}

export { Login }

我自己想到了几种潜在的解决思路，但都有疑问或局限：

• 每次点击按钮时为每个请求新建AbortController，但不清楚具体如何实现
• 将AbortController移入useEffect，但这样事件处理器就无法访问到它
• 将请求逻辑提取到独立组件，通过props传递参数和useCallback创建的回调函数
• 把组件状态切换改为路由组件切换，但数据传递会变得复杂

想请教：是否存在在useEffect外进行API调用的标准方案？

内容的提问来源于stack exchange，提问作者Spook