React全局Snackbar组件仅能调用一次问题求助

你的全局Snackbar首次调用正常、后续失效的核心问题是**open状态没有在每次调用时重置**：

• GlobalSnackbar组件中open初始值为true，首次关闭后通过handleClose设为false；
• 后续调用callSnackbar时，虽然message和severity更新了，但open仍保持false，导致Snackbar无法重新展示；
• 额外问题：用message作为key，如果两次调用的消息内容相同，React会认为是同一个组件，不会触发重新渲染。

方案1：在组件内监听消息变化，自动重置open状态 #

修改GlobalSnackbar组件，通过useEffect监听message和severity的变化，当有新消息时自动打开Snackbar：

import useSnackbar from "./useSnackbar";
import { Alert, Slide, Snackbar } from "@mui/material";
import { useState, useEffect } from "react";

export const GlobalSnackbar = () => {
    const { message, severity, duration } = useSnackbar();
    const [open, setOpen] = useState(false);
    
    // 监听消息变化，有新内容时打开Snackbar
    useEffect(() => {
        if (message && severity) {
            setOpen(true);
        }
    }, [message, severity]);
    
    const handleClose = (e, reason) => {
        if (reason === "clickaway") {
            return;
        }
        setOpen(false);
    };
    
    // 无需条件渲染，通过open状态控制显示隐藏
    return (
        <Snackbar 
            key={`${message}-${Date.now()}`} // 用时间戳+消息生成唯一key，避免重复消息不渲染
            anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
            autoHideDuration={duration}
            open={open} 
            onClose={handleClose} 
            TransitionComponent={Slide}
        >
            <Alert severity={severity} variant="filled" onClose={handleClose}>
                {message}
            </Alert>
        </Snackbar>
    );
}

方案2：将open状态移到Context统一管理（更推荐） #

把Snackbar的显示状态也纳入Context管理，让callSnackbar直接控制打开/关闭逻辑，减少组件内的状态分散：

1. 修改Context文件，加入open状态和统一的关闭逻辑：

import { useState } from "react";
import { createContext } from "react";

const DURATION = 3000;
const SnackContext = createContext({
    message: '',
    severity: '',
    duration: DURATION,
    open: false,
    callSnackbar: () => {},
    handleClose: () => {},
});

export function SnackProvider({children}){
    const duration = DURATION;
    const [message, setMessage] = useState('');
    const [severity, setSeverity] = useState('');
    const [open, setOpen] = useState(false);

    const callSnackbar = (message, severity) => {
        setMessage(message);
        setSeverity(severity);
        setOpen(true);
        // 自动关闭并清空内容
        setTimeout(()=>{
            setOpen(false);
            setMessage('');
            setSeverity('');
        },duration);
    };

    const handleClose = (e, reason) => {
        if (reason === "clickaway") {
            return;
        }
        setOpen(false);
        // 延迟清空内容，避免动画未结束导致闪烁
        setTimeout(()=>{
            setMessage('');
            setSeverity('');
        }, 300);
    };

    return (
        <SnackContext.Provider value={{message, severity, duration, open, callSnackbar, handleClose}}>
            {children}
        </SnackContext.Provider>
    );
}
export default SnackContext;

2. 简化GlobalSnackbar组件，直接使用Context中的状态和方法：

import useSnackbar from "./useSnackbar";
import { Alert, Slide, Snackbar } from "@mui/material";

export const GlobalSnackbar = () => {
    const { message, severity, duration, open, handleClose } = useSnackbar();
    
    return (
        <Snackbar 
            key={`${message}-${Date.now()}`}
            anchorOrigin={{ vertical: 'top', horizontal: 'center' }} 
            autoHideDuration={duration}
            open={open} 
            onClose={handleClose} 
            TransitionComponent={Slide}
        >
            <Alert severity={severity} variant="filled" onClose={handleClose}>
                {message}
            </Alert>
        </Snackbar>
    );
}

修改后，每次点击调用按钮，callSnackbar都会重置open状态为true，同时唯一的key确保即使消息重复也能重新渲染Snackbar，解决后续调用不展示的问题。

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