MaterialUI Snackbar传入相同值时如何通过setState触发重渲染

问题根因 #

你当前的实现问题出在useEffect的依赖项仅为message，当两次触发的错误文本完全一致时，React会判定依赖项未发生变化，不会执行useEffect内的Snackbar入队逻辑，因此不会弹出新的提示。你的判断没错，这种通过状态变化模拟事件触发的写法确实属于反模式，不符合React的状态设计原则。

方案1：最小改动修复现有问题 #

只需要调整上层错误状态的结构，每次生成新的引用即可触发useEffect执行：

1. 上层错误状态不再存纯字符串，改为每次触发时生成带唯一标识的新对象

// 上层组件错误状态定义
const [error, setError] = useState(null);

// 触发错误时的逻辑
setError({ text: "Not found", id: Date.now() });

2. 调整Toast组件的入参和依赖项

const Toast = ({ error }) => {
  React.useEffect(() => {
   if(error?.text) {
     setSnackPack((prev) => [...prev, { message: error.text, key: error.id }]);
   }
}, [error])
 // 其余官方示例逻辑保持不变
}

哪怕两次错误的文本完全一致，每次setError生成的都是全新的对象，依赖项变化后就会触发useEffect执行，弹出新的提示。

方案2：更合理的重构实现 #

推荐用Context封装命令式的Toast调用能力，彻底避免依赖项绑定的问题，逻辑更清晰：

1. 全局封装ToastProvider和调用hook

import { createContext, useContext, useState } from 'react';
import { Snackbar } from '@mui/material';

const ToastContext = createContext(null);

export const ToastProvider = ({ children }) => {
  const [snackPack, setSnackPack] = useState([]);
  // 此处直接复用MUI官方Consecutive Snackbars的队列处理、开闭逻辑即可

  const showToast = (message) => {
    setSnackPack(prev => [...prev, { message, key: Date.now() }]);
  };

  return (
    <ToastContext.Provider value={{ showToast }}>
      {children}
      {/* Snackbar组件渲染逻辑放在这里 */}
    </ToastContext.Provider>
  );
};

export const useToast = () => useContext(ToastContext);

2. 根组件包裹Provider

// App.jsx
import { ToastProvider } from './ToastContext';

function App() {
  return (
    <ToastProvider>
      {/* 你的其余应用代码 */}
    </ToastProvider>
  );
}

3. 任意组件直接调用即可

import { useToast } from './ToastContext';

const YourInputComponent = () => {
  const { showToast } = useToast();

  const handleSubmit = (value) => {
    // 校验不通过时直接调用
    showToast("Not found");
  };
};

这种实现完全不存在重复内容无法弹出的问题，Toast组件独立维护队列逻辑，上层组件不需要额外维护驱动Toast的状态，职责划分更合理。

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