React项目中设备状态变更后Toast提示不显示问题求助

你的Toast不显示的核心原因是自定义Toast组件中的<CToast>缺少visible属性控制，CoreUI的CToast默认处于隐藏状态，必须通过visible属性来触发显示/隐藏逻辑。当前代码仅将Toast组件渲染到DOM中，但未控制它的显示状态，因此不会弹出提示。

方案一：适配现有代码，添加visible状态控制 #

1. 更新Toast组件，接收visible属性并传递给CToast #

// Toast.js
import React from 'react';
import { CToast, CToastHeader, CToastBody } from '@coreui/react';

const Toast = ({ header, body, visible, onClose }) => (
    <CToast visible={visible} onClose={onClose}>
      <CToastHeader closeButton>
        {header}
      </CToastHeader>
      <CToastBody>{body}</CToastBody>
    </CToast>
);

export default Toast;

2. 修改Dashboard中的状态管理逻辑，维护Toast的显示状态 #

// Dashboard.js
const Dashboard = () => {
    // ... 其他原有状态
    // 修改toasts结构，新增visible字段控制显示
    const [toasts, setToasts] = useState([]);

    const showToast = (header, body) => {
        const newToast = { header, body, id: Date.now(), visible: true };
        setToasts(prev => [...prev, newToast]);

        // 5秒后自动移除Toast
        setTimeout(() => {
            setToasts(prev => prev.filter(t => t.id !== newToast.id));
        }, 5000);
    };

    // 处理Toast关闭按钮事件
    const handleToastClose = (toastId) => {
        // 先隐藏Toast，再延迟移除DOM
        setToasts(prev => prev.map(t => 
            t.id === toastId ? {...t, visible: false} : t
        ));
        setTimeout(() => {
            setToasts(prev => prev.filter(t => t.id !== toastId));
        }, 300);
    };

    // ... 其他原有函数

    return (
        <>
            <CToaster position="top-right">
                {toasts.map(toast => (
                    <Toast 
                        key={toast.id} 
                        header={toast.header} 
                        body={toast.body}
                        visible={toast.visible}
                        onClose={() => handleToastClose(toast.id)}
                    />
                ))}
            </CToaster>
            {/* 其他原有渲染内容 */}
        </>
    )
}

方案二：使用CoreUI官方useToaster钩子（更简洁） #

CoreUI提供了专门的useToaster钩子管理Toast，无需手动维护状态数组：

1. 简化Toast组件（或直接在调用时创建） #

// Toast.js
import React from 'react';
import { CToast, CToastHeader, CToastBody } from '@coreui/react';

const Toast = ({ header, body }) => (
    <CToast>
      <CToastHeader closeButton>
        {header}
      </CToastHeader>
      <CToastBody>{body}</CToastBody>
    </CToast>
);

export default Toast;

2. 在Dashboard中集成useToaster #

// Dashboard.js
import { useToaster } from '@coreui/react'; // 导入钩子

const Dashboard = () => {
    const { toaster, push } = useToaster(); // 获取toaster实例和推送方法
    // ... 其他原有状态和函数

    const showToast = (header, body) => {
        push(
            <Toast header={header} body={body} />,
            { 
                placement: 'top-right',
                autohide: true,
                delay: 5000 // 5秒后自动隐藏
            }
        );
    };

    // ... 其他原有函数

    return (
        <>
            {/* 替换原有手动渲染的CToaster，useToaster会自动处理渲染 */}
            {toaster}
            {/* 其他原有渲染内容 */}
        </>
    )
}

• 方案一贴近你现有代码结构，适合小范围调整；
• 方案二更符合CoreUI设计规范，代码更简洁易维护，优先推荐使用。

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