Reactjs Ant设计下载在api调用期间加载微调器

我试图让Ant设计库中的按钮在进行api调用时显示微调器动画

这是按钮（这是加载按钮）

此外，我一直在尝试将其转换为功能组件

import React, { useState, useEffect, useContext } from 'react';
import { AppContext } from '../../AppContext';
import { Button } from 'antd';
import { RetweetOutlined, GlobalOutlined } from '@ant-design/icons';
import axios from 'axios';


const APICallButton = () => {
  const [context, setContext] = useContext(AppContext);
  const [loadings, setLoadings] = useState([]);


  const apiCall = () => {
    axios.get('api/endpoint')
    .then(res => {
                setContext(prev => ({...prev, state: res.data})))
                // Remove loading spinner?
              }
    .catch(e => console.log(e))
  }


  return (
  <Button
    id='update-prices-btn'
    type="primary"
    icon={<GlobalOutlined />}
    loading={loadings[1]}
    onClick={() => {
      setContext(prev => ({...prev, products: apiCall()}))
    }}
  >
      Make API Call
  </Button>
  )
}

export default APICallButton

import React，{useState，useffect，useContext}来自'React'；
从“../../AppContext”导入{AppContext}；
从“antd”导入{Button}；
从“@ant design/icons”导入{RetweetOutlined，GlobalOutlined}；
从“axios”导入axios；
常量APICallButton=（）=>{
const[context，setContext]=useContext（AppContext）；
常量[loadings，setLoadings]=useState（[]）；
常量apiCall=（）=>{
axios.get（'api/endpoint'）
。然后（res=>{
setContext（prev=>（{…prev，state:res.data}）））
//卸下加载微调器？
}
.catch（e=>console.log（e））
}
返回(
{
setContext（prev=>（{…prev，products:apiCall（）}））
}}
>
进行API调用
)
}
导出默认APICALL按钮

在启动API调用之前，请将加载状态设置为true。 当API调用完成或失败时，将加载状态设置为false

const [loading, setLoading] = useState(false);

const apiCall = () => {

    // Before you fire the API call, set the loading state to true.
    setLoading(true);

    axios.get('api/endpoint')
        .then(res => {
            setContext(prev => ({...prev, state: res.data})))

            // When your API call completes or fails, set the loading state to false.
            setLoading(false);
        })
        .catch(e => {
            console.log(e);

            // Also need to set loading to false if your request fails
            setLoading(false);
        });
}

然后使用

加载

状态变量控制组件（例如显示微调器）

<Button loading={loading} ... />