点击按钮渲染组件异常：Fetch运行时Spin加载组件无法渲染

• 问题根源：你用普通变量spinning控制加载状态，但React不会监听普通变量的变化——就算你把它设为true，组件也不会触发重渲染，所以Spin组件根本不会显示出来。

• 修复方案：用React的useState钩子管理状态，状态更新会自动触发组件重渲染；同时要在Fetch请求的完整流程（成功/失败）里重置状态，避免一直显示加载。

修改后的代码示例：

import { useState } from 'react';
import { Button, Spin } from 'antd'; // 假设你使用Ant Design组件库

export const LoginStructure: React.FC<{ closeModal: any }> = ({ closeModal }) => {
  const [spinning, setSpinning] = useState(false);

  const handleLogin = async () => {
    setSpinning(true); // 点击后立即开启加载状态
    try {
      // 执行你的登录请求
      const response = await fetch('/api/login', {
        method: 'POST',
        // 补充请求头、请求体等配置
      });
      const data = await response.json();
      // 请求成功后的逻辑，比如关闭弹窗
      closeModal();
    } catch (error) {
      // 处理请求失败的情况
      console.error('登录失败:', error);
    } finally {
      setSpinning(false); // 无论成功失败，请求结束后关闭加载状态
    }
  };

  return (
    <>
      <Button htmlType="submit" onClick={handleLogin}>
        {spinning ? <Spin /> : '登录'}
      </Button>
    </>
  );
};

额外说明：

• 很多UI组件库的Button自带loading属性，直接传入spinning也能实现加载效果，比如<Button htmlType="submit" onClick={handleLogin} loading={spinning}>登录</Button>，两种方式选其一即可。
• 用try/catch/finally包裹请求逻辑，能确保加载状态一定会被重置，不会出现一直转圈的情况。

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