如何实现antd加载状态按钮？函数执行时维持加载动画

你的示例代码存在一个核心问题：同步耗时任务会阻塞React的UI更新流程——setLoading(true)执行后，页面还没来得及渲染加载状态，同步循环就已完成并立刻执行setLoading(false)，导致加载动画根本无法显示。以下是具体实现方案和优化建议：

一、基础实现（处理同步耗时任务） #

将同步任务放入setTimeout中，让React先完成状态更新与UI渲染，再执行耗时操作：

import { useState } from 'react';
import { Button } from 'antd';

const YourComponent = () => {
  const [isLoading, setLoading] = useState<boolean>(false);

  function handleSave() {
    setLoading(true);
    // 借助setTimeout将同步任务推入宏任务队列，优先完成UI更新
    setTimeout(() => {
      // 替换为你的实际同步耗时操作
      for (let i = 1; i < 20000; i++) {};
      setLoading(false);
    }, 0);
  }

  return (
    <Button
      loading={isLoading}
      onClick={handleSave}>
      Save
    </Button>
  );
};

export default YourComponent;

二、常见场景：异步任务（如API请求） #

如果实际业务是异步操作（比如接口请求），直接用async/await配合try/finally确保加载状态一定会被重置：

import { useState } from 'react';
import { Button } from 'antd';

const YourComponent = () => {
  const [isLoading, setLoading] = useState<boolean>(false);

  async function handleSave() {
    setLoading(true);
    try {
      // 模拟API请求，替换为你的实际接口调用
      await new Promise(resolve => setTimeout(resolve, 1500));
      // 可添加操作成功后的逻辑，如提示用户保存完成
    } catch (error) {
      // 处理请求失败场景，如错误提示
      console.error('保存失败:', error);
    } finally {
      // 无论成功/失败，都关闭加载状态
      setLoading(false);
    }
  }

  return (
    <Button
      loading={isLoading}
      onClick={handleSave}>
      Save
    </Button>
  );
};

export default YourComponent;

三、优化建议 #

• 避免阻塞主线程：如果同步任务计算量极大，推荐使用Web Worker处理，避免页面卡顿，保障用户交互流畅性。
• 简化属性配置：Antd的Button组件在loading={true}时会自动禁用按钮，无需额外添加disabled={isLoading}，减少冗余代码。
• 容错处理：必须通过try/finally或catch重置加载状态，防止异步操作抛出错误后，按钮一直处于加载状态。
• 状态更新逻辑：React状态更新是异步的，不要在setLoading(true)后立刻依赖isLoading的值做判断，此时状态尚未完成更新。

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