如何在Semantic UI中点击按钮后才显示Message组件？

核心问题分析 #

你之前的尝试无效有两个原因：

1. 普通变量的修改不会触发React组件重新渲染，React仅响应**状态（useState/useReducer）**或props的变化更新UI；
2. Semantic UI React的Message组件的visible/hidden是布尔属性，不是字符串值，正确用法是visible={true}而非传递字符串'visible'。

下面提供两种可行方案：

方案一：用独立状态控制显示（推荐） #

新增一个状态变量专门控制Message的可见性，初始设为false，获取API数据后切换为true：

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

export default function Writer() {
    const [titleText, setTitleText] = useState('');
    const [showMessage, setShowMessage] = useState(false); // 控制Message显示的状态

    const getResponse = () => {
        // 补充你的API请求逻辑，比如fetch/axios
        fetch('你的API接口地址')
            .then(res => res.json())
            .then((response) => {
                setTitleText(response.data.choices[0].text);
                setShowMessage(true); // 获取数据后显示Message
            })
            .catch(err => {
                // 错误处理：显示错误提示
                setTitleText('请求失败，请稍后重试');
                setShowMessage(true);
            });
    }

    return (
        <div>
            <Button onClick={getResponse}>获取内容</Button>

            {/* 通过visible属性控制显示 */}
            <Message visible={showMessage}>
                <Header
                    icon textAlign='center'
                    content={titleText}
                />
            </Message>
        </div>
    )
}

方案二：基于内容是否存在控制渲染 #

如果能确保API返回的titleText不会是空字符串，可以直接根据内容是否存在来条件渲染Message：

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

export default function Writer() {
    const [titleText, setTitleText] = useState('');

    const getResponse = () => {
        fetch('你的API接口地址')
            .then(res => res.json())
            .then((response) => {
                setTitleText(response.data.choices[0].text);
            })
            .catch(err => {
                setTitleText('请求失败，请稍后重试');
            });
    }

    return (
        <div>
            <Button onClick={getResponse}>获取内容</Button>

            {/* 只有当titleText非空时才渲染Message */}
            {titleText && (
                <Message>
                    <Header
                        icon textAlign='center'
                        content={titleText}
                    />
                </Message>
            )}
        </div>
    )
}

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