如何在React中使用自定义Axios Hook立即获取并使用API响应？

你的问题核心在于React状态更新是异步的：调用fetchData后，setResponse不会立刻更新response变量，所以紧接着的if(response.status === 200)判断拿到的还是初始状态（空数组），导致首次点击走else分支。

下面提供最直接的解决方案，无需额外新增状态：

修改自定义Hook，让fetchData直接返回响应 #

调整useAxiosFunction中的fetchData函数，在设置response状态后直接返回响应结果，同时在catch块抛出错误，方便调用方处理：

const useAxiosFunction = () => {
    const [response, setResponse] = useState([]);
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false); 
    const [controller, setController] = useState();

    const fetchData = async (configObj) => {        
        try {
            setLoading(true);
            const ctrl = new AbortController();
            setController(ctrl);
            const res = await axios({...configObj, 
                signal: ctrl.signal                
            });            
            setResponse(res);
            return res; // 直接返回响应结果
        } catch (err) {            
            setError(err.response.data);
            throw err; // 抛出错误供调用方捕获
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {        
        return () => controller && controller.abort();
    }, [controller]);
    
    return [response, error, loading, fetchData];
}

修改调用逻辑，用await直接获取响应 #

将handleClickTransfer改为async函数，通过await获取fetchData返回的响应，直接使用该返回值进行判断，无需依赖React状态更新：

const [response, error, loading, fetchData] = useAxiosFunction();

const handleClickTransfer = async (codOp, cvu, alias, email, comment) => {        
    try {
        const res = await fetchData({
            method: "GET",
            url: `${process.env.REACT_APP_ORQ_URL}/${process.env.REACT_APP_ORQ_VER}/consultaPagos/codigoOrdenPago/${codOp}`,   
            data: {"comment": refComment.current},        
            ...getHeadersToken()                        
        });

        if(res.status === 200){
            modalProps.current = modalTransferencias(res.data.payments, codOp, cvu, alias, email, comment);
            handleShow();
        }
    } catch (err) {
        console.log(err.response.data);
    }
}

这种方式既保留了原Hook中response、loading、error状态的功能（供其他组件逻辑使用），又能在点击事件中立即拿到最新的响应结果，完美解决你的问题。

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