如何实现Semantic UI Message点击按钮后显示加载图标直至API响应？

核心思路是通过维护loading状态控制加载图标的显示，结合titleText的内容状态切换最终展示内容，具体步骤如下：

1. 完善状态管理 #

确保组件同时维护两个状态：

• loading：布尔值，标记是否处于加载中，初始值设为false
• titleText：存储生成的标题，初始值设为空字符串''

2. 处理API请求逻辑 #

点击按钮时立即触发加载状态，请求完成后（无论成功或失败）关闭加载状态：

• 点击按钮时先把loading设为true，同时清空旧的titleText，避免内容混乱
• 调用API获取标题，成功后将返回值赋值给titleText
• 用finally块确保请求结束后一定会关闭加载状态，防止加载图标一直显示

3. 条件渲染Semantic UI组件 #

根据loading和titleText的状态，分别渲染加载状态、生成的标题或初始提示：

• 当loading为true时，显示带加载图标的Message
• 当loading为false且titleText长度大于0时，展示生成的标题
• 其他情况显示初始提示

完整代码示例 #

import React, { useState } from 'react';
import { Button, Message } from 'semantic-ui-react';

const TitleGenerator = () => {
  const [titleText, setTitleText] = useState('');
  const [loading, setLoading] = useState(false);

  const generateTitle = async () => {
    // 立即开启加载，清空旧标题
    setLoading(true);
    setTitleText('');

    try {
      // 替换成你的API地址
      const res = await fetch('https://your-api-endpoint.com/generate-title');
      const data = await res.json();
      // 假设API返回的标题字段为data.generatedTitle
      setTitleText(data.generatedTitle || '');
    } catch (err) {
      console.error('生成失败:', err);
      setTitleText('标题生成失败，请重试');
    } finally {
      // 请求结束必关加载
      setLoading(false);
    }
  };

  return (
    <div style={{ margin: '20px' }}>
      <Button onClick={generateTitle} primary>生成标题</Button>

      {loading ? (
        <Message loading style={{ marginTop: '10px' }}>
          正在生成标题，请稍候...
        </Message>
      ) : titleText.length > 0 ? (
        <Message success style={{ marginTop: '10px' }}>
          <Message.Header>生成完成</Message.Header>
          <p>{titleText}</p>
        </Message>
      ) : (
        <Message info style={{ marginTop: '10px' }}>
          <p>点击按钮开始生成标题</p>
        </Message>
      )}
    </div>
  );
};

export default TitleGenerator;

关键注意点 #

• 不要等到API请求返回后才设置loading，必须在点击按钮的瞬间就开启加载状态，满足"立即显示加载图标"的需求
• 使用finally块处理加载状态的关闭，避免请求失败时加载图标一直停留
• Semantic UI的Message loading属性会自动添加加载图标和动画，无需手动单独添加Icon组件，当然你也可以手动控制Icon的loading属性来实现更自定义的样式

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