按下按钮后在 SemanticUI 消息中显示加载图标直到 API 响应答案

【问题标题】：Show loading icon in SemanticUI Message after button press until API response按下按钮后在 SemanticUI 消息中显示加载图标直到 API 响应
【发布时间】：2022-11-23 04:43:59
【问题描述】：

我正在制作一个应用程序，它使用 API 创建标题并将其放入语义 UI 消息中。

按下按钮后，我希望加载图标出现，然后在 titleText.length > 0 后消失。我该怎么做？

这是我没有图标的代码。

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

export default function Writer() {

    const [titleText, setTitleText] = useState('');

    const getResponse = () => {
        //Does Some Stuff
        }).then((response) => {
            setTitleText(response.data.choices[0].text)
        })

return (
    <div>
        <Button onClick={getResponse}></Button>


        <Message visible={titleText.length > 0} hidden={titleText.length === 0}>
            <Header
                icon textAlign='center'
                content={titleText}
            />
        </Message>
        
    </div>
    )
}

这是我试图添加的内容：

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

我将其添加到 API 响应函数的开头：

    const getAPIResponse = () => {
        setLoading(true)

我还创建了另一条消息，它只应在第一次按下按钮后出现，并在收集到 API 响应后消失：

                        <Message visible={loading === true} hidden={titleText.length > 0}>
                            <Icon name='circle notched' loading />
                        </Message>

【问题讨论】：

标签： javascript reactjs semantic-ui

【解决方案1】：

你能试试这个吗（我不知道语义用户界面）：

<Message class={` ${loading ? 'visible' : 'hidden'} `}>
   <Icon name='circle notched' loading />
</Message>

【讨论】：